Работа с JavaScript в SVG

Работа с JavaScript в SVG

От автора: веб-разработчики при работе с SVG используют JavaScript в различных целях: анимация, интерактивность, создание и модификация элементов. Однако при добавлении скриптов внутрь SVG нужно учесть несколько моментов.

JS код можно добавить в любом месте SVG документа между открывающим и закрывающим тегами <svg>. На деле скрипт необходимо размещать в нижней части документа, чтобы избежать блокировки, а также чтобы скрипт имел полный доступ к DOM.

На большинстве ресурсов вам будут советовать прописывать MIME-тип (т.е. <script type=»text/javascript»> или <script type=»application/ecmascript»>). На самом деле это необязательно: JavaScript/ECMAScript по умолчанию работает в браузерах, и не нужно ничего указывать, даже в контексте SVG.

Также множество ресурсов советуют писать JS код в SVG документе внутри конструкции <[CDATA[

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
    <script>//<![CDATA[
        ...код...
    //]]>
    </script>
</svg>

Браузеры иногда пытаются распарсить JavaScript в SVG как XML, полностью ломая весь код. Закомментированное выражение CDATA «защищает» скрипт от такой интерпретации. В современных браузерах JS код можно писать и без данной конструкции, но так будет безопаснее.

В SVG можно прописывать внешние ссылки на скрипты, для этого используется xlink:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <script xlink:href="external.js" />
</svg>

SVG работает по принципу XML, не HTML. Поэтому такие методы как innerHTML не работают в SVG (есть другие).

Однако JavaScript работает в большей степени точно так же, как и в HTML документе: можно ссылаться на id, теги и т.д. Нужно только учесть, что при создании и поиске элементов учитывается регистр, более подробно об этом я расскажу в следующей статье.

Возможные проблемы

Больше всего начинающих разработчиков смущает тот факт, что при добавлении SVG с JS кодом внутрь разметки в качестве изображения, JavaScript код внутри файла не работает. То есть:

<img src="getfunky.svg" alt="" >

…любой JS код внутри файла будет игнорироваться (некоторые браузеры распознают SMIL , однако в скором будущем его все равно скоро запретят). Поправить данное недоразумение можно двумя способами:

Вставлять SVG напрямую в страницу, а не ссылаться на него через тег изображения:

<html lang="en">
...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
    <script>//<![CDATA[
        ...код...
    //]]>
    </script>
</svg>

В данном случае JS код внутри SVG никак не отличается от любого другого JS кода в любом месте страницы:

<html lang="en">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
    ...
    </svg>
    <script>
    ...
    </script>
</html>

Или же на SVG можно ссылаться в виде <object> или <iframe> в HTML:

<object data="getfunky.svg" type="image/svg+xml">
    <img src="fallback.jpg">
</object>

В обоих случаях JavaScript код внутри SVG будет выполняться и влиять на векторные данные.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree