В статье рассматриваются наиболее типичные причины неработоспособности приложений SVG.
На практике очень часто случается, что приложение SVG должно работать, фрагменты кода, как и в других работающих приложениях точно такие же, но любые попытки найти ошибку, заставить работать новое приложение не приносят результата.
Хочу поделиться некоторыми практическими приемами по диагностике и отладке приложений SVG.
Продолжить чтение
Порою хочется добавить на свой сайт красивую и сложную анимацию, реализующую какой-то образ, сценку. Мне попалась эта красивая картинка юной парижанки, которая отправилась совершать shopping,- и пусть весь мир вокруг подождёт.
Продолжить чтение
Начинаю новый раздел – онлайн инструменты. Для чего? Конечно для наглядности и удобства пользователей сайта. Вручную не трудно написать команды основных фигур SVG: line, polyline, polygon, rect, circle, ellipse, но это нужно скорее для приобретения практических навыков написания кода SVG. Гораздо сложнее написать команду path, например для кривых Безье. Вернее написать можно, опираясь на теоретические формулы, но вот сразу подобрать нужную форму кривых, комбинируя парами параметров довольно сложно и трудоёмко. Графические редакторы облегчают эту задачу, но там своя специфика: необходимо чистить, оптимизировать код, правда и для этого есть свои инструменты, но зачем тратить столько усилий, когда нужна всего одна или пара кривых, которые можно наглядно создать в онлайн инструментах за несколько секунд и получить чистый SVG код.
В этой части статьи будем эксперементировать с анимацией координат точек линии.
Команда на отрисовку линии: <line x1=”100″ y1=”170″ x2=”100″ y2=”30″/>
Для наглядности будем изменять только одну конечную координату линии “y2”, изменяя её значение с 30px до 170px.
Запуск анимации осуществляется кнопкой “Start”. Защитой от повторного запуска во время анимации служит команда – restart=”whenNotActive”
Анимация продолжается два цикла – repeatCount=”2″
Продолжить чтение