Использование SVG и SVG анимации, вызов из JavaScript
- Подробности
- Категория: PHP, MySQL, Java
- Опубликовано 21.09.2014 14:10
Давайте коснёмся немного темы SVG в этом материале.
SVG (Scalable Vector Graphics) сама по себе представляет векторную графику на странице. SVG может быть увеличени сколь угодной кратностью без потери качества. Внутри тега SVG всё измеряется не в пикселях или каких-то привычных HTML'у величинах, а абстрактными цифрами. Данные цифры в итоге нужны только для позиционирования элементов относительно 0,0 координат SVG.
Как известно в Javascript можно производить вывод графики как в canvas элементе, так и в svg. Разница между двумя этими способами детально рассмотрена не будет здесь. Всё что вам нужно знать это то что canvas все созданные на холсте эелементы неинтерактивны, т.е. никак не идентифицируются после отрисовки. Их можно идентифицировать собственными обработчиками исходя из координат мыши. Плюсом canvas является то что можно разместить очень большое количество объектов в нём, чего не сказать о svg. SVG это способ взаимодействия с графикой, который существенно отличается от Canvas. Большое количество элементов в SVG приведёт тормозам на странице, однако его сильные черты в том что все объекты являются векторными и интерактивными, что позволяет даже нативными svg-инструментами делать анимации, что очень радует.
Простое использование SVG:
<svg height="110" width="110">
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow"/>
</svg>
Вы наверняка заметили свойство fill - которое в SVG вместо background-color.
Нужно отметить что в параметры тега svg лучше дописывать все нужные параметры:
width="10cm" height="8cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg"
Высота, ширина - думаю это понятно. viewBox - измняется размер всего внутри, эдакий scale. А последний параметр нужен для браузеров, его лучше не трогать.
SVG может также существовать в виде файла с расширением svg. Файлы должны выглядеть так:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version = "1.1"
baseProfile="full"
xmlns = "http://www.w3.org/2000/svg";
xmlns:xlink = "http://www.w3.org/1999/xlink";
xmlns:ev = "http://www.w3.org/2001/xml-events";
height = "400px" width = "400px">
<g fill-opacity="0.1" stroke="black" stroke-width="0.5px">
<circle cx="200px" cy="200px" r="104px" fill="red" transform="translate( 0,-52)" />
<circle cx="200px" cy="200px" r="104px" fill="blue" transform="translate( 60, 52)" />
<circle cx="200px" cy="200px" r="104px" fill="green" transform="translate(-60, 52)" />
</g>
</svg>
Подключить к стринице его можно как картинку в теге img для статичного отображения или можно воспользоваться конструкцией:
<object data="file.svg" type="image/svg+xml"></object>
Давайте рассмотрим некоторые часто используемые объекты SVG:
Линия:
<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>
Непрерыная гнутая линия:
<polyline points="0,0 10,0 30,10 25,30 50,90" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>
Окружность:
<circle cx="30" cy="30" r="10" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
Эллипс:
<ellipse cx="80" cy="50" rx="10" ry="30" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
Прямоугольник:
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow"/>
Анимация
Давайте коснёмся темы анимации в SVG элементах. Выполняется она вставкой специального тега, например:
<rect x="20" y="20" width="250" height="250" style="fill:blue">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>
Как видим, мы вставили тег внутрь объекта. В параметры анимации можно также добавить аттрибут fill="freeze", это заставит анимированный объект после окончания анимации оставать там где она завершилась, а не перелетать на начальную позицию.
Вы можете настроить параметры, так и данные для анимации. Стоит здесь отметить что аттрибут attributeType может быть либо CSS либо XML. Это указывает чей тип параметра будет модифицироваться.
Для того чтобы применить несколько свойст анимации, нужно писать несколько тегов. 1 тег это 1 шаг 1 свойства. Для нескольких шагов нужно использовать вызов анимации с задержкой используя begin="10s", вместо 10 любое время.
Также в SVG есть другой тег animateTransform, который может выполнять такие трансформации как scale, rotate, translate и в этом принцип схож с CSS трансформациями:
<animateTransform attributeName="transform" type="scale" from="0" to="1" dur="3s"/>
Вы можете также воздействовать CSS'ом на ваши элементы в SVG. Всем элементам вы можете присвоить class и id для обращения из CSS. Также будут работать и псевдоклассы.
Создание SVG элементов через Javascript
Создание элемента SVG и его объектов с помощью Javascript несколько от создания других элементов. Если у вас не работает создание SVG через Javascript, мы знаем в чём дело.
Следующий пример показывает использование метода createElementNS чтобы создать элемент, т.к. с SVG createElement не работает:
/*Создаём тег SVG*/
var mysvg=document.createElementNS(";, 'svg');
mysvg.setAttribute('width','250');
mysvg.setAttribute('height','250');
mysvg.setAttribute('viewBox','-5 -5 50 50');
/*Создаём элемент rect*/
var newElement = document.createElementNS(";, 'rect');
newElement.setAttribute('width','7');
newElement.setAttribute('height','7');
newElement.setAttribute('x', 10);
newElement.setAttribute('y',10);
newElement.setAttribute('class','nsquare');
/*Помещаем rect в наш svg*/
mysvg.appendChild(newElement);
/*Помещаем svg с вложенным элементом в DOM*/
document.body.appendChild(mysvg);
Если у вас возникли какие-либо вопросы по материалу, не стесняйтесь - спрашивайте.