Введение в Snap.svg

Чтобы изменить это поведение, а также внешний вид других элементов, мы должны ввести атрибуты.

Атрибуты

Понятие атрибутов для элементов Snap несколько шире, чем обычно, это означает, что оно включает в себя как атрибуты HTML, так и атрибуты CSS в одном интерфейсе (в то время как в большинстве других библиотек проводится различие между .attr() для атрибутов HTML и ‘.style () для CSS). Используя метод element.attr() объекта-обертки Snap, вы можете установить его class или id , а также его цвет или ширину.

Как упоминалось выше, используя Snap, вы можете назначить CSS-свойства элементу двумя способами. Одним из них является включение этих свойств в отдельный файл CSS, а затем просто назначьте соответствующий элемент для вашего элемента:

 .big-circle { stroke: red; stroke-width: 2; fill: yellow; } 

 circle.attr({class: 'big-circle'}); 

Тот же результат можно получить, назначив эти свойства с помощью JavaScript:

 circle.attr({ stroke: 'red'; stroke-width: 2; fill: 'yellow'; }); 

Опять же, первый способ позволяет лучше разделить контент и представление, а второй — возможность динамически изменять атрибуты. Если вы думаете о смешении двух стратегий, имейте в виду, что правила, определенные в файле CSS, будут element.attr() перед правилами, которые вы назначаете с помощью element.attr() , несмотря на временный порядок, в котором они назначаются элементам.

Если вы не сохранили ссылку на элемент, который хотите стилизовать, не беспокойтесь, вы можете легко получить его с помощью CSS-селекторов:

 circle = paper.select('circle'); //First circle in paper's DOM tree circle = paper.select('circle.big-circle'); //First circle in paper's DOM tree which has class 'big-circle' circle = paper.select('circle:nth-child(3)'); //Third circle in paper's DOM tree circle = paper.selectAll('circle.big-circle'); //All circles in paper's DOM tree with class 'big-circle' 

группы

Элементы SVG могут быть сгруппированы так, чтобы общие преобразования и обработка событий можно было легко применять ко всем элементам в группе. Создать группу легко:

 var group = paper.g(circle, rect); var g2 = paper.group(rect, circle, ellipse); //an alias for paper.g 

Будьте осторожны: порядок или аргументы имеют значение! Во-вторых, если вы назначите элемент группе, он будет удален из любой группы, к которой он, возможно, уже принадлежит.

Элементы могут, конечно, также добавляться в существующие группы после их создания:

 group.add(circle); 

Картинки

Snap поддерживает вложение растровых изображений в элементы SVG, их асинхронную загрузку и отображение только после завершения загрузки.

 var img = paper.image('bigImage.jpg', x, y, width, height); 

Полученный объект можно рассматривать как элемент SVG. Обратите внимание: если вы используете select() для изображений, чтобы получить их позже, созданная оболочка будет той же, что и для элементов HTML, поэтому большинство методов, доступных для элементов SVG, не будут поддерживаться.

Трансформации

Мы видели, как рисовать асимметричные многоугольники, такие как эллипсы и прямоугольники. Однако базовые методы заставляют нас рисовать эти фигуры выровненными по декартовым осям. Что если мы хотим нарисовать эллипс, оси которого повернуты на 45 ° относительно осей xy? Мы не можем указать это в методах создания, но мы можем использовать преобразования для получения того же результата.

Аналогичным образом нам может понадобиться повернуть изображение или переместить элемент (или группу) в какой-то момент после его создания. Метод transform() позволяет нам сделать это, передав строку SVG-преобразования:

 var ellipse = paper.ellipse(100, 50, 10, 20); ellipse.transform('r45'); 

Этот метод может принимать либо строку, либо объект в качестве входных данных. Мы также можем использовать матрицу преобразования, связанную с элементом, чтобы применить то же преобразование к другому элементу:

 var e1 = paper.ellipse(100, 50, 10, 20), e2 = paper.ellipse(200, 50, 12, 24); e1.transform('r45'); e2.transform(e1.matrix); 

Будьте осторожны: центр преобразования для второго элемента все равно будет тем же, который использовался для первого, поэтому конечный эффект может вас удивить.

Метод transform() также можно использовать для извлечения объекта дескриптора преобразования для элемента, к которому он вызывается — просто вызовите его без аргументов. Этот дескриптор может использоваться для извлечения матрицы локального преобразования и матрицы разностей в случае вложенных элементов:

 var g1 = paper.group(), e1 = paper.ellipse(200, 50, 12, 24); g1.add(e1); g1.transform('r30'); e1.transform('t64.6447,-56.066r45,0,0'); console.log(e1.transform()); 

Вывод

Эта статья представляет собой введение в основы Snap.svg. Если вы заинтересованы в просмотре самых крутых вещей, пожалуйста, следите за обновлениями, так как расширенное продолжение будет опубликовано в ближайшее время.

Если вы хотите узнать больше о визуализации данных и Snap, вот несколько полезных ресурсов:

1. Snap.svg учебник .
2. Слайды из презентации о визуализации данных и передовых методах.
3. Посмотрите на приведенный выше код в действии на CodePen.