Svg

Содержание

SVG-теги

<svg>

Тег внедряет SVG-документ внутрь текущего документа, например, HTML. Тег имеет свои координаты X и Y, высоту и ширину, и свой уникальный id.


Вот как он может выглядеть:

<g>

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

Вот пример тега :

<rect>

Элемент представляет собой базовую фигуру SVG — прямоугольник. Он может иметь различные атрибуты, такие как координаты, высота, ширина, цвет заливки, цвет обводки и острые или закруглённые углы.

Вот пример тега :

<use>

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

Вот пример тега :

<path>

Элемент определяет путь, состоящий из координат точек для формирования фигуры. Код с использованием может казаться магией, но не пугайтесь! В примере ниже код можно прочесть как:

  1. «M150 0» — переместись на (150,0);
  2. «L75 200» — нарисуй линию к (75,200) от предыдущей точки (которая имела координаты (150,0));
  3. «L255 200» — нарисуй линию к (225,200) от предыдущей точки (которая имела координаты (75,200));
  4. «Z» — закрой путь (нарисуй линию к начальной точке).

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

Вот пример тега :

<symbol>

И, наконец, элемент определяет символы, которые могут быть использованы повторно. Эти символы отрисовываются только при помощи тега .

Вот пример тега :

Добавляем немного интерактивности

Всё хорошо, но не помешало бы сделать диаграмму более живой. Давайте добавим небольшую анимацию во время отрисовки и эффекты при наведении.

1. Анимация

В предыдущем туториале мы уже разбирали, как сделать простую анимацию. Если вы никогда не делали анимации на CSS, будет полезно для начала прочитать его.

Давайте добавим анимацию во время отрисовки секций диаграммы. Для этого будем постепенно изменять свойство , начиная с нуля и заканчивая теми значениями, которые мы указали ранее — для каждой секции оно своё. То есть длина секции будет постепенно возрастать от нуля до нужного значения.

Для создания анимации используем ключевое слово , зададим название анимации и укажем состояние в начальной точке — :

Мы намеренно не указали состояние в конечной точки анимации — , так как у каждой секции своя длина. В данном случае после выполнения анимации свойство примет то значение, которое мы уже прописали ранее для каждой секции. Так работает анимация — по окончании элемент возвращается в исходное состояние.

Теперь добавим к уже имеющимся свойствам элемента новые — и . Они позволят задать название и продолжительность анимации и применить её к секциям диаграммы.

Всё работает — секции постепенно появляются в течение заданного времени.

2. Эффект при наведении

Добавим плавное увеличение секции при наведении на неё. Используем псевдокласс , чтобы увеличить толщину обводки наших окружностей-секций и добавить им полупрозрачность.

Сейчас переход между состояниями происходит резко, но это поведение можно изменить с помощью плавных переходов. Укажем свойства, которые нужно изменять плавно (в нашем случае все), и длительность перехода — за это отвечают и .

Теперь переход между состояниями происходит плавно.

3. Немного JavaScript

Всё почти готово, но хочется ещё создать связь между легендой и диаграммой. В этом нам поможет JavaScript. Если вы пока с ним не знакомы, то познакомьтесь. Оно того стоит, правда.

Мы напишем небольшой скрипт, который позволит выделять нужную секцию при наведении на её название в легенде. Эффекты будем использовать точно такие же, как при наведении на саму секцию. Мы уже прописали их для , поэтому теперь просто продублируем для специального класса , который далее будем использовать в JavaScript-коде.

Вот шаги, которые должны быть реализованы в скрипте:

  1. Найти все названия секций в легенде.
  2. Найти все секции диаграммы.
  3. Добавить каждому названию секции отслеживание событий наведения и снятия курсора.
  4. Внутри обработчиков этих событий добавлять или удалять класс у секций диаграммы в зависимости от положения курсора.

Здесь мы отслеживаем движение мыши с помощью событий (курсор над элементом) и (курсор уходит с элемента). А для поиска нужной секции используем совпадение порядковых номеров названий в легенде и секций диаграммы — названия = секции. Нужно учесть, что их всегда должно быть равное количество.

Вот теперь диаграмма готова! Весь код, который мы написали в туториале, доступен на CodePen.

See the Pen svg pie chart by sasha_htmlacademy (@sasha-sm) on CodePen.

Specifying the target element and property

There are 2 ways to tell which element a given animation will target. The first one is to embed the as a child tag of the element to animate. Here is an example:

<circle cx="100px" cy="100px" r="20px">
   <animate attributeName="r" attributeType="XML" begin="1s" dur="2s" from="20px" to="50px">
</circle>

The element targets the radius () property of the parent element. Starting 1 second after the document start, the radius will grow for 2 seconds from 20 pixels to 50 pixels. When nothing else is specified, the animation only applies in its interval of time, here seconds; from 0 to 1 second and then from 3 second and after, the circle’s radius is set back to its static attribute value, here 20 pixels.

The other way to specify the target element is to reference it in via an attribute of the animation element. the previous animation could be written this way:

<circle id="balloon" cx="100px" cy="100px" r="20px" />
<animate xlink:href="#balloon" attributeName="r" attributeType="XML" begin="1s" dur="2s" from="20px" to="50px" />

Practical Example: Loading Icon

There are an infinite number of possibilities for animations you can create using these basic techniques, but one of the most immediately useful is the creation of loading icons where you might formerly have relied on animated GIFs.

This is a loading icon I created in about five minutes using Sketch:

I then exported it to an SVG file which gave me the following code:


Given this icon comprises multiple shapes inside a group, and as we’ve learned from above you can apply to a group, I added my animation code before the last closing tag:

The above code sets the icon to rotate from 0 to 360 degrees, i.e. a full circle.

Revolve Axis

Note that this time I have also included an extra two numbers in both the and settings. This tells the animation to revolve around a point on the shape’s own internal X / Y axis of , i.e. the center of the shape given it is 36×36 pixels in size.

This produces the following animation:

Again, your in-browser animation will be smoother than the above GIF, so be sure to check out the real thing. As you can see, it’s very quick and easy to put together animations you can get solid practical use out of.

5 последних уроков рубрики «Разное»

  • Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

  • Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

    Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

  • Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

  • Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Функция времени в SVG анимации

Чтобы дать больше свободы, можно переопределить анимацию каждого пути и / или всего SVG. Это работает немного как функция синхронизации анимации CSS. Но вместо использования функции кубического Безье, она использует простую функцию JavaScript. Он должен принять число в качестве параметра (от 0 до 1), а затем вернуть число (также от 0 до 1). Это крюк.

Если вы не хотите создавать свои собственные, методы синхронизации доступны через объект конструктора: , , and . Затем установите его в объекте option, чтобы наслаждаться ими.

JavaScript

// Здесь для легкого рисования будет использоваться легкая анимация. new Vivus( ‘my-svg-id’, { type: ‘delayed’, duration: 200, animTimingFunction: Vivus.EASE }, myCallback );

1 2 3 4 5 6 7 8 9

// Здесь для легкого рисования будет использоваться легкая анимация.

newVivus(‘my-svg-id’,

{

type’delayed’,

duration200,

animTimingFunctionVivus.EASE

},

myCallback

);

ВНИМАНИЕ: вызывается в каждом кадре анимации, а  также вызывается в каждом кадре для каждого пути вашего SVG. Так что будьте осторожны с ними

Сохраняйте это простым, или это может повлиять на производительность.

Трансформация SVG с помощью CSS

С помощью CSS можно менять цвет, размер, поворачивать, управлять временем анимации. Делать всё то, что делаем с элементами HTML страницы. Стили пишем в svg файл внутри тега <style>. Вот пример простой трансформации svg картинки

CSS работает в SVG не совсем так как с HTML. Прежде всего это касается атрибутов отвечающих за заливку и обводку. Вместо привычных нам background и border здесь нужно использовать fill, stroke и stroke-width. В качестве css свойств нужно использовать атрибуты SVG. Не все атрибуты можно изменять с помощью CSS. Не прикосновенными остаются атрибуты определяющие размер, координаты(x, y), радиус. В SVG2 список доступных для css атрибутов расширят.

Не смотря на ограничения в текущей версии svg можно управлять расположением и отображением svg элементов используя css свойство transform. При трансформации учитывайте, что в отличии от привычной трансформации в HTML, где точка отсчёта по умолчанию — центр блока, точка отсчёта в SVG — верхний левый угол изображения.

Как подключать CSS стили в SVG

  1. Тег <style>. Этот способ использован в примере выше. Тег <style> должен находиться внутри SVG.
  2. Атрибут style, для конкретного элемента.
  3. Можно вынести тег <style> за пределы svg. В этом случае SVG должен быть вставлен непосредственно в html.

В качестве селекторов используем обычные class и ID. Также поддерживаются псевдо-классы, такие как  :hover, :focus, :first-child.

Взаимодействие SVG, XML с HTML, CSS, Jscript

В SVG, как и в HTML можно добавлять ссылки на внешние ресурсы. Но если в HTML одна картинка может служить только для одной внешней ссылки, то в SVG документ можно добавлять сколько угодно внешних ссылок . Картинка кликабельна. Внутрь HTML страницы легко встраивается код SVG документа или целиком подключается внешний SVG файл. Можно наоборот, внутри SVG файла разместить код HTML внутри тегов foreignObject. Получаются интересные эффекты: Внутри SVG файла находится работающий внешний HTML сайт. К SVG формату можно подключать внешние таблицы стилей CSS 2.0, что позволяет управлять сразу несколькими файлами *.svg. Также вполне допустимо подключение стилей внутри файла *.svg внутри тегов style или использовать внутренние стили непосредственно внутри командных строк фигур и путей. SVG, как любой основанный на XML формат, позволяет использовать для его обработки таблицы трансформации (XSLT). Преобразуя XML-данные в SVG с помощью простого XSL, можно получить графическое представление текстовых данных, например визуализировать графики, круговые диаграммы, гистограммы и т.д.

Анимация трансформаций

Теперь когда мы разобрались, как работают трансформации, мы сможем без труда создать анимацию для различных состояний трансформации. Основной процесс состоит из трёх шагов:

  1. Установите изначальное состояние трансформации: состояние.
  2. Установите конечное состояние трансформации: состояние.
  3. Установите время повторение для переходов анимации от и состояния.

Лучше всего это можно понять на практике, так что давайте начнём с анимации трансформации.

Анимация Translate трансформаций

Помните ранее наш голубой прямоугольник по умолчанию находился на позиции , то есть на оси и на оси . Мы установили позицию в качестве состояния.

Далее мы рассмотрели пример, где тому же голубому прямоугольнику были заданы значения translate равные , то есть по оси и по оси . Позиция была установлена, как состояние.

Используя мы плавно передвигаем прямоугольник от состояния к , в течении двух секунд.

Ваша SVG фигура, в данном случае прямоугольник, должна иметь открывающий и закрывающий теги, то есть .

Атрибут должен находиться между этих двух тегов, следующим образом:

Обратите внимание на свойства внутри тега. Они контролируют, как ваша анимация будет работать

Мы установили равный translate, что означает, что будет применяться тип трансформации . Как и планировалось, мы установили значение позиции для состояния и для состояния .

Значение установлено равным , что означает — анимация начнётся с ноля секунд после загрузки, имеет значение , означает, что анимация будет отображаться в течении двух секунд. Наконец мы добавили со значением , тем самым анимация будет работать без остановки, повторятся в цикле.

В результате мы получим следующую анимацию:

Анимация остальных трансформаций

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

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

Так как scale трансформация увеличивает оригинальный размер фигуры, мы начали со значения для . Делая это мы увеличиваем, умножаем оригинальный размер на 1.


Наше значение равно , создаст анимацию нашей scale трансформации, увеличив в три раза ширину на оси X и на четверть увеличив оригинальную высоту на оси Y.

Обратите внимание: анимация в браузере работает гораздо плавнее, чем на GIF изображении выше

Анимация нескольких трансформаций

Мы можем соединить обе анимации, которые были созданы, так что translate и scale будут работать одновременно. Вы можете использовать лишь один тег внутри тега , поэтому для нескольких анимаций, нам понадобится теги, которые представляют из себя группу SVG объектов.

Чтобы это работало добавьте открывающий и закрывающий теги вокруг тегов:

Затем добавьте вторую анимацию после закрывающего тега , перед закрывающим тегом. В данном случае будет добавлена наша translate трансформация:

Теперь обе scale и translate трансформации анимируются одновременно:

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

Давайте быстро взглянем на оставшиеся три типа трансформации, каждый создаётся изменением , значений и , а также скомбинированы с первоначальной translate анимации.

Анимация ротации (Rotation) плюс перехода (Translation)

В этом примере обладает значением , равен — при загрузке нет ротации и установлено значение , тем самым фигура вращается на 45 градусов в течении двух секунд:

SkewX и SkewY анимация плюс переход (Translation)

Для следующих двух анимаций значение равно и , равняется , никакого искажения при загрузке и равно , тем самым фигура исказится на 20 градусов за две секунды:

Анимация skewX трансформацииАнимация skewY трансформации

Основные преимущества формата SVG.

Я не буду долго распространяться о преимуществах векторной графики перед растровой в вебдизайне, замечу лишь, что, однажды созданный, файл в формате SVG одинаково хорошо выглядит без потери качества и на мобильном устройстве и на станционарном мониторе домашнего ПК. Шапка данного сайта выполнена в формате SVG, попробуйте уменьшить окно браузера до минимальных размеров, картинка на “лету” будет также пропорционально уменьшаться. SVG – это двухмерная графика и тем не менее это текстовый формат, который можно легко править в блокноте или просто рисовать в векторных редакторах: Incscape , Adobe illustrator, CorelDRAW

Бесконечное полотно документа svg.

Итак, как происходит формирование векторного изображения. Документ формата SVG – это двухмерный объект, который может иметь бесконечные координаты, как в положительном, так и в отрицательном направлении по осям X и Y. Также документ SVG имеет две области просмотра: viewport – системная область просмотра и viewBox – пользовательская область просмотра, положение которой относительно начала системных координат viewport, может задаваться собственной, пользовательской системой координат. Другими словами окно просмотра viewBox, может быть перемещёно в любое место документа SVG, при этом берется фрагмент изображения под ним, который после процесса согласования между viewBox и viewport, возвращается обратно в системную область просмотра viewport, которую видит пользователь. Используя это свойство можно организовать вертикальную или горизонтальную прокрутку изображения, меняя параметры координат viewBox.

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

Перед тем как мы начнём

Чтобы анимировать SVG фигуру, для начала нам нужно сделать её. Самый простой способ для создания SVG, который я нашла — использовать Sketch от Bohemian Coding. Если вы не покупали лицензию Sketch, можно воспользоваться  бесплатной версией на 30 дней, этого будет вполне достаточно для нашего туториала.

Нам понадобится SVG код, нарисуйте фигуру в Sketch, после чего выделите фрагмент (slice) и экспортируйте его в качестве SVG файла.

Далее мы можем открыть экспортированный файл в текстовом редакторе (к примеру Sublime Text) и скопировать SVG код оттуда. Всё что нам нужно — код между открывающим тегом и закрывающим тегом .

К примеру Sketch создаёт следующий SVG код голубого прямоугольника на изображении выше.

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

Установите элементу ширину и высоту — , а также удалите . Удалите комментарии , , , и элементы.

В итоге у вас должно получится что-то вроде этого:

Добавьте этот код в HTML документ, в браузере вы увидите такой же прямоугольник, который нарисовали в Sketch:

Обратите внимание: на изображении выше показаны X и Y оси, они нам понадобятся во время создания анимации. Вы поймете зачем в скором времени

SVG анимация

SVG анимация, в отличии от css, имеет доступ ко всем атрибутам элементов и следовательно больше возможностей. Но если вы знаете и умеете JS, то svg анимация не предложит вам ничего такого чего бы вы не сделали используя Javascript. Главное помнить что анимация сделанная с применением Javascript не будет работать если svg добавлен на страницу через тег <img> или как background-image. Подробнее про JS анимацию SVG в другой раз.

Для анимации в SVG нужно создать объект <animate> и выбрать объект для анимации через атрибут xlink:href. В качестве параметра xlink:href принимает URI ссылку.

Если  xlink:href не задан, то анимация применится к родительскому элементу

Следующим шагом указываем атрибут который будем изменять. Для этого используем attributeName. Имя атрибута может быть одним из SVG атрибутов или css свойством. Есть необязательный параметр attributeType, который подсказывает к чему относится атрибут(css или svg). Если  attributeName не задан, браузер сначала посмотрит доступные css свойства если нет то проверит svg атрибуты. AttributeName принимает только одно значение. Если нужно анимировать несколько атрибутов нужно для каждого добавить <animate>.

Обект и атрибут выбрали. Переходим к анимации. Условия при которых начинается анимация определяются в атрибуте begin. В качестве параметра принимает время или действие после которого должна запуститься анимация. Например begin=»3s» запустит анимацию через три секунды после загрузки а begin=»click» после клика. Можно комбинировать begin=»click + 3s» — через три секунды после клика.

Старт анимации одного элемента можно привязать к анимации другого. Для этого нужно задать для первого элемента id(например id=»first_animanion») а для второго указать begin=»first_animation.begin + 3s». Таким образом мы запустим анимацию через три секунды после старта анимации с id first_animation. Но это ещё не всё. begin=»first_animation.end» запустит анимацию после завершения first_animation, а  begin=»first_animation.end — 3s» запустит анимацию за 3 секунды до завершения first_animation.

Атрибуты from и to определяют начальное и конечное значение анимируемого атрибута. Dur определяет время анимации.

Атрибут анимации fill определяет что делать элементу после завершения анимации. Принимает два значения:

  1. freeze — оставляет элемент в том же состоянии в каком элемент оказался в момент завершения анимации
  2. remove — возвращает элемент в первоначальное состояние.

Атрибут repeatCount определяет сколько раз повториться анимация. Можно указать конкретное количество повторений или для бесконечных повторений — indefinite. Не обязательный атрибут. Без него анимация проигрывается один раз.

Атрибут restart управляет перезапуском анимации. Принимает одно из трёх значений

  1. always — возможен перезапуск в любой момент
  2. whenNotActive — перезапуск возможен после завершения анимации
  3. never — перезапуск невозможен.

Пример как всё это выглядит в коде и в браузере.

Animation Security

Declarative animation, in principle, is more secure than scripted animation.

JavaScript is a powerful, fully-expressive programming language with many possible security concerns; so, many environments don’t wish to expose those risks by allowing JavaScript to execute, since it might be doing other things than simple animation.

This means that these environments, such as social media, don’t want to allow content to be loaded via the <object>, <iframe>, or <embed> elements. Thus, SVG content can only securely be loaded in HTML via the <img> element.

Currently, loading an SVG document via the <image> element prevents script from executing, and prevents external resources from being loaded, to prevent fingerprinting and other security attacks. Browsers which currently support declarative animation also support running timeline-based animations in SVG referenced in the <img> element.

SVG Анимация. Принципы работы

Чтобы получить этот эффект, скрипт использует CSS-свойство . Это свойство управляет смещением штриха в каждой строке SVG. Теперь все, что нам нужно сделать, это добавить немного JavaScript для постепенного обновления этого значения, и волшебство начинается.

Тем не менее, есть проблема с этим. Свойство доступно только для элементов пути. Это проблема, потому что в SVG есть много элементов, таких как круг, прямоугольни , линия и полилиния, которые нарушают анимацию. Поэтому, чтобы исправить это, в репозитории есть еще один класс, называемый . Это сделано для преобразования всех объектов вашего SVG в элементы пут , чтобы иметь возможность использовать смещение штрихов и анимировать ваши SVG.


Анимация всегда рисует элементы в том же порядке, как они определены в теге SVG.

Есть несколько условий, которым должен соответствовать ваш SVG:

  • Все элементы должны иметь свойство обводки и не могут быть заполнены. Это связано с тем, что анимация выглядит только для постепенного рисования штрихов и не проверяет заполненные цвета. Например: fill: «none»; stroke: «#FFF»;
  • Вы должны избегать создания каких-либо скрытых элементов пути в вашем SVG. Vivus считает их всех подходящими для анимации, поэтому рекомендуется удалить их, прежде чем поиграть с ними. Если они не удалены, анимация может не достичь желаемого эффекта с появлением пустых областей и пробелов.
  • Текстовые элементы не допускаются, они не могут быть преобразованы в элементы пути.

Анимированная заливка fill с помощью CSS

На встроенном SVG очень легко анимировать цвет заливки с помощью небольшого CSS кода.

Представим, что на вашей странице есть встроенный элемент SVG с идентификатором . Вы применяете следующий CSS, чтобы сделать его с непрозрачностью по умолчанию равной 0, и класс с непрозрачностью 1 (с переходом). Затем, когда анимация закончится, класс можно добавить в SVG.

CSS

/* Style */ #mySVG * { fill-opacity: 0; transition: fill-opacity 1s; }

#mySVG.finished * { fill-opacity: 1; }

1 2 3 4 5 6 7 8 9

/* Style */

#mySVG * {

fill-opacity;

transitionfill-opacity1s;

}

#mySVG.finished * {

fill-opacity1;

}

JavaScript

/* JavaScript */ new Vivus(‘mySVG’, {}, function (obj) { obj.el.classList.add(‘finished’); });

1 2 3 4

/* JavaScript */

newVivus(‘mySVG’,{},function(obj){

obj.el.classList.add(‘finished’);

});

ПРЕДУПРЕЖДЕНИЕ. Этот хак не может работать с изолированными решениями, такими как использование тега объекта .

Конструктор

Конструктор Vivus запрашивает 3 параметра:

  • Идентификатор (или объект) элемента DOM для взаимодействия. Это может быть встроенный SVG или элемент-обертка для добавления тега объекта из опций файла
  • Опция объекта (описано в следующем |
  • Обратный вызов для вызова в конце анимации (необязательно)

Настройки

Имя Тип Описание
string Определяет, какой тип анимации будет использоваться: отложенная, синхронизация, по одному, скрипт, сценарий или сценарий-синхронизация.
string Ссылка на SVG для анимации. Если установлено, Vivus создаст тег объекта и добавит его к элементу DOM, данному конструктору. Будьте осторожны, используйте обратный вызов перед игрой с экземпляром Vivus.
string Определяет, как запустить анимацию (, когда SVG находится в области просмотра, инструкция дает вам свободу вызывать метод draw для запуска, запускает его прямо сейчас).
integer Продолжительность анимации, в кадрах.
integer Время между рисованием первого и последнего пути в кадрах (только для отложенных анимаций).
function Функция вызывается, когда экземпляр готов к воспроизведению.
function Функция анимации времени для каждого элемента пути SVG. Проверьте .
function Функция анимации времени для полного SVG. Проверьте .
integer Расстояние дополнительный запас между линиями. Увеличьте его в случае сбоев в начальном состоянии анимации.
boolean Заставьте браузер перерисовать все обновленные элементы пути. По умолчанию значение только для IE. (проверьте раздел «устранение неполадок» для более подробной информации).
boolean Обратный порядок исполнения. Поведение по умолчанию — рендеринг с первого «пути» в SVG до последнего. Эта опция позволит вам отменить заказ.
boolean Удаляет все лишние стили в SVG и оставляет его оригинальным.

Методы

Имя Описание
Воспроизведение анимации со скоростью, указанной в параметре. Это значение может быть отрицательным, чтобы двигаться назад, между 0 и 1, чтобы двигаться медленно,> 1, чтобы идти быстрее, или <0, чтобы идти назад от текущего состояния. . Обратный вызов выполняется после завершения анимации (необязательно)
Останавливает анимацию.
Реинициализирует SVG в исходное состояние: неиспользованный.
Set the SVG to the final state: drawn.
Установите прогресс анимации. Прогресс должен быть числом от 0 до 1.
Получить статус анимации между началом , прогрессом , концом
Сбросьте SVG, но сделайте экземпляр не по порядку.

Эти методы возвращают объект, чтобы вы могли связать действия в цепочку.

JavaScript

const myVivus = new Vivus(‘my-svg-id’); myVivus .stop() .reset() .play(2);

1 2 3 4 5

constmyVivus=newVivus(‘my-svg-id’);

myVivus

.stop()

.reset()

.play(2);

Воспроизвести метод обратного вызова

Вместо того, чтобы использовать глобальный обратный вызов конструктора при создании объекта Vivus, вы можете добавить обратные вызовы, которые будут выполняться для определенных вызовов методов воспроизведения .

JavaScript

const myVivus = new Vivus(‘my-svg-id’); myVivus.play(1, function() { // вызывается после завершения анимации }); // поочередно, если вы оставите параметр скорости пустым и используете значение по умолчанию, вы // может передать обратный вызов в качестве первого параметра, например, так.

myVivus.play(function() { // вызывается после завершения анимации });

1 2 3 4 5 6 7 8 9 10

constmyVivus=newVivus(‘my-svg-id’);

myVivus.play(1,function(){

// вызывается после завершения анимации

});

// поочередно, если вы оставите параметр скорости пустым и используете значение по умолчанию, вы // может передать обратный вызов в качестве первого параметра, например, так.  

myVivus.play(function(){

// вызывается после завершения анимации

});

Устранение проблем

Internet Explorer

Некоторые SVG вообще не работали. SVG анимация и старые версии ШУ браузера не очень хорошо дружат. Единственным найденным решением было клонировать и заменить каждый обновленный элемент пути. Конечно, это решение требует больше ресурсов и большого количества манипуляций с DOM, но оно даст плавную анимацию, как и другие браузеры. Этот запасной вариант применяется только в Internet Explorer (все версии) и может быть отключен с помощью параметра .

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

По умолчанию имеет значение только в Internet Explorer.

Firefox

Для пользователей Firefox вы можете столкнуться с некоторыми сбоями в зависимости от версии SVG и браузера. В версиях до 36 существует проблема с получением длины пути с помощью метода getTotalLength. Возвращая 174321516544 вместо 209 (я не преувеличиваю, это происходит из реального случая), запутывая всю анимацию. К сожалению, эта библиотека ничего не может сделать, это связано с Firefox. Я надеюсь найти обходной путь, но на данный момент я могу только рекомендовать вам протестировать анимацию на предыдущих версиях Firefox.

Debug

Для облегчения отладки взгляните на   атрибутов вашего объекта Vivus. Это содержит отображение вашей анимации. Если вы используете современный браузер, я рекомендую

, чтобы получить хороший вывод массива, который облегчит вашу отладку.

JavaScript

const logo = new Vivus(‘myLogo’, { type: ‘scenario-sync’ }); // Свойство ‘map’ содержит все отображения SVG console.table(logo.map);

1 2 3

constlogo=newVivus(‘myLogo’,{type’scenario-sync’});

// Свойство ‘map’ содержит все отображения SVG

console.table(logo.map);

Демо на русском Бонус: https://msurguy.github.io/triangles/

Вам должно быть интересно Создание эффекта раскрывания (Reveal Effects) при прокрутке с помощью aos.js


С этим читают