Как оживить SVG без jQuery

Дополнение первой статьи для тех, кто хочет обойтись без jQuery


Оглавление



Введение


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

Наверх

Постановка задачи


Все так же, как и в первой части статьи, дано: мы имеем простейшее SVG изображение, приведенное на рисунке слева. Это изображение вставлено в HTML страницу посредством тэга <embed>:

<embed width="200" height="100" src="svgdyn.svg" /> Содержимое SVG файла изображения: <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" viewBox="0 0 200 100" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns="http://www.w3.org/2000/svg"> <rect id="fig1" x="10" y="10" width="80" height="80" fill="red" stroke="black" stroke-width="10" /> <circle id="fig2" cx="150" cy="50" r="40" fill="black" stroke="red" stroke-width="10" /> </svg> SVG файл содержит два объекта: прямоугольник, имеющий идентификатор fig1, и окружность, имеющую идентификатор fig2. Мы хотим поменять цвет обводки и цвет заливки этих фигур. За цвет обводки отвечает атрибут stroke, за цвет заливки - fill. В отличие от первой части статьи, для поиска узлов DOM дерева SVG изображения и установки их атрибутов мы не будем использовать какие-либо сторонние библиотеки, а будем работать из JavaScript непосредственно с DOM API.

Наверх

Решение


Здесь я не буду подробно описывать свои действия, а отошлю за комментариями к первой части статьи. Объект окна, в котором отображается HTML страница, расширим функцией svgload_html:


window.svgload_html = function(evt) {
  var svg = evt.target, //Вот он, корневой узел DOM SVG
      f = false, fig1 = svg.getElementById("fig1"), fig2 = svg.getElementById("fig2");
  setInterval(function() {
    f = !f;
    fig1.attributes["fill"].value = f ? "black" : "red";
    fig1.attributes["stroke"].value = f ? "red" : "black";
    fig2.attributes["fill"].value = f ? "red": "black";
    fig2.attributes["stroke"].value = f ? "black" : "red";
  }, 1000);
};

SVG файл тоже несколько модифицируем: <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" viewBox="0 0 200 100" preserveAspectRatio="xMidYMid meet" onload="svgload_svg(evt);" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns="http://www.w3.org/2000/svg"> <defs> <script type="application/ecmascript"><![CDATA[ function svgload_svg(evt) { var w = window, w0 = null; while (w && !w.svgload_html && w != w0) { w0 = w; w = w.parent; } if (w) w.svgload_html(evt); } ]]></script> </defs> <rect id="fig1" x="10" y="10" width="80" height="80" fill="red" stroke="black" stroke-width="10" /> <circle id="fig2" cx="150" cy="50" r="40" fill="black" stroke="red" stroke-width="10" /> </svg>

Результат работы примера Вы можете видеть на картинке слева.

Как видите, отказ от использования библиотеки jQuery вылился в незначительное усложнение функции svgload_html.


Наверх

Чистый пример


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

Наверх