Оказывается в SVG можно делать не только равномерные анимации, но и анимации с переменной скоростью. Для этого нужно добавить к элементу анимации свойство calcMode, которое по умолчанию выставлено в paced (равномерная анимация). В данном случае меня интересует значение spline, которое … подробнее →
2012-04-24 17:00:14
... браузеров при интерпретации SVG. Допустим, нужно ... xlink:href="rect.svg" width="100" height ...
+ развернуть текстсохранённая копия
Сегодня я столкнулся с еще одним странным поведением браузеров при интерпретации SVG. Допустим, нужно подключить SVG-изображение которое находится во внешнем файле. В секцию defs помещаю элемент image: <image id="rect" xlink:href="rect.svg" width="100" height="50"/> После этого использую его пару раз: <use xlink:href="#rect" … подробнее →
2012-04-24 01:50:46
... графика (SVG) предоставляет ... не решались использовать SVG, возможно приведенные ...
+ развернуть текстсохранённая копия
Элемент HTML5 canvas используется повсеместно. Будь то WebGL игры или потрясающие браузерные эксперименты, веб-разработчики дружно садятся в вагончик canvas и наслаждаются поездкой.
Но всегда ли мы используем для работы нужный инструмент? Во многих случаях масштабируемая векторная графика (SVG) предоставляет лучшую альтернативу, но об этой технологии легко позабыть на фоне назойливой рекламы canvas. Если вы до сих пор не решались использовать SVG, возможно приведенные здесь факты смогут вас переубедить…
Прошлым летом я уже писал про SVG-элемент animateMotion и приводил пример его работы. Вчера он преподнес мне неожиданный сюрприз. Оказывается браузеры разделились в интерпретации параметра transform анимируемого объекта. В Firefox и Chrome\Chromium трансформации применяются только к объекту и его визуально … подробнее →
В последнее время я обнаруживаю все больше деталей из спецификации SVG, которые тот или иной браузер не поддерживает. Например, Chrome не ловит мышейсобытия начала и конца анимации. Для быстрой проверки кто неправ — я или браузер удобно использовать специальные таблицы. … подробнее →