HTML Academy
Предыдущее задание
Размеры в SVG4/15
Вернуться в список заданий
  1. 1. Ширина и высота SVG
  2. 2. Атрибут viewBox
  3. 3. viewBox и размеры
  4. 4. Испытание: рыбка
  5. 5. Атрибут preserveAspectRatio
  6. 6. Резиновый фон с preserveAspectRatio
  7. 7. Испытание: резиновые полосы
  8. 8. Выравнивание в preserveAspectRatio
  9. 9. preserveAspectRatio и viewBox
  10. 10. Заполнение пространства
  11. 11. Испытание: радуга
  12. 12. Единицы измерения
  13. 13. Системы координат
  14. 14. Системы координат и трансформации
  15. 15. Испытание: желтый лист
Следующее задание
Оформить подписку
  • Регистрация
  • Войти

Зарегистрируйтесь, чтобы проходить испытания

Регистрация займёт всего минуту и позволит сохранять прогресс обучения. Вы можете зарегистрироваться с помощью своей эл. почты и пароля, либо с помощью соцсетей.

или

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Войти и продолжить
  • object.svg
  • style.css
SVG
<svg> <g id="fish"> <path fill="olivedrab" d="M81.592.37c19.9 2.102 39.47 13.838 58.707 35.207L90.11 38.462C88.937 25.884 86.097 13.186 81.592.37zM99.354 150c12.867-1.36 25.852-9.268 38.954-23.727l-32.45-1.865c-1.423 8.774-3.59 17.305-6.504 25.592zM59.08 81.25c0 27.163-58.707 53.685-58.707 54.327C17.8 89.394 17.765 81.25.373 26.923c0 .952 58.707 27.164 58.707 54.327z"/> <path fill="yellowgreen" d="M120.398 128.846c29.31 0 55.843-16.025 79.602-48.077-23.76-32.052-50.293-48.078-79.602-48.078-43.963 0-79.602 21.525-79.602 48.077 0 26.55 35.64 48.076 79.602 48.076z"/> <path fill="gold" d="M139.13 126.32c23.436-5.678 43.726-20.86 60.87-45.55-20.02-27.17-40.293-42.348-60.818-45.537-30.57 31.603-18.83 65.88-.052 91.086z"/> <g transform="translate(129.353 43.27)"> <ellipse cx="22.886" cy="23.077" fill="#FFF" rx="16.915" ry="16.346"/> <circle cx="30.348" cy="24.519" r="7"/> <circle r="2" cx="32" cy="22" fill="white"/> <path fill="darkorange" d="M37.683 15.49C34.01 7.243 24.116 3.637 15.58 7.437c-8.533 3.8-12.475 13.566-8.803 21.813l30.906-13.76z"/> </g> <path fill="saddlebrown" stroke="darkorange" stroke-width="3" d="M195.788 86.538c1.728 0 3.13-2.583 3.13-5.77 0-3.185-1.402-5.768-3.13-5.768-1.73 0-3.13 2.583-3.13 5.77 0 3.185 1.4 5.768 3.13 5.768z"/> </g> </svg>
CSS
svg { background-color: #ffffff; border: 1px solid #dddddd; }

Что в задании вам не понравилось?

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

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

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

100%
  • Образец
  • Результат
  • Наложение
  • Различия
  • ?

Нажмите кнопку «Сравнить», чтобы отправить ваше решение на проверку.

Не удалось загрузить образец. Попробуйте позже.

Образец — интерфейс, который вам нужно получить.

Результат — то, как видит ваш код наш сервер. Может отличаться от того, что в мини-браузере. Сравнение происходит между этим результатом и образцом.

Наложение — полупрозрачный результат отображается над образцом.

Различия — карта различий между образцом и результатом.

Выполнено 0%.
Код был изменён
Логотип HTML Academy
  • Наша группа в ВК
  • Наша группа в Facebook
  • Наша страница в Twitter
  • Наша страница в Instagram
  • Наш канал в Telegram
Инновационный центр Сколково

Курсы

  • Тренажёры
  • Подписка
  • Для команд и компаний
  • Учебник по PHP

Профессии

  • Фронтенд-разработчик
  • React-разработчик
Интенсивы
  • HTML и CSS.
    Профессиональная вёрстка сайтов
  • HTML и CSS.
    Адаптивная вёрстка и автоматизация
  • JavaScript.
    Профессиональная разработка веб-интерфейсов
  • JavaScript.
    Архитектура клиентских приложений
  • React.
    Разработка сложных клиентских приложений
  • PHP.
    Профессиональная веб-разработка
  • PHP и Yii.
    Архитектура сложных веб-сервисов
  • Node.js.
    Разработка серверов приложений и API
  • Анимация для фронтендеров
  • Вёрстка email-рассылок
Блог
  • Для новичков
  • Прокачка
  • Карьера
  • Лекции и доклады

Информация

  • Об Академии
  • О центре карьеры

Услуги

  • Работа наставником
  • Для учителей

Остальное

  • Написать нам
  • Мероприятия
  • Форум

СоглашениеКонфиденциальностьСведения об образовательной организацииЛицензия № 3026© ООО «Интерактивные обучающие технологии», 2013−2021