• Теория
  • Теория

Испытание: резиновые полосы

Исходные размеры изображения — 140 на 140. Добавьте <svg> нужные атрибуты, чтобы при текущих размерах SVG-элемента полосы заполняли всё доступное пространство.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

<svg width="500" height="250" viewBox="0 0 140 140" preserveAspectRatio="none">
  <g id="colored-stripes">
    <path fill="tomato" d="M0 0h20v140H0z"/>
    <path fill="lightseagreen" d="M20 0h20v140H20z"/>
    <path fill="gold" d="M40 0h20v140H40z"/>
    <path fill="cornflowerblue" d="M60 0h20v140H60z"/>
    <path fill="darkorange" d="M80 0h20v140H80z"/>
    <path fill="yellowgreen" d="M100 0h20v140h-20z"/>
    <path fill="purple" d="M120 0h20v140h-20z"/>
  </g>
</svg>
Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Размеры в SVG» тренажёра «Внутреннее устройство SVG» можно после регистрации и оформления подписки.