QR CODE для записи

SVG на собственной шкуре. Часть 2 — обращение к DOM SVG файла с помощью JavaScript

В предыдущей статье «SVG на собственной шкуре. Часть 1 — создание SVG файла в CorelDraw» я рассказывал, как легко можно создать и оптимизировать SVG файл. Также был эксперимент, в первую очередь для своего блога, о котором я рассказывал в статье «Скрипт смены стиля пользователем в WP и не только…». Также писал вкратце про SVG анимацию в статье «RE: Анимированный PNG в Firefox, Opera и WebKit? Легко!» На этом я конечно не остановился, и проводил ещё «эксперимент», о котором, к сожалению, а может к счастью мне лень было писать. Но вот оно свершилось, на меня снизошла неведомая сила, которая заставила написать данную статью.

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

document.getElementById("svg").getSVGDocument();

где getElementById(«svg») — ищет элемент с ID = «svg», а getSVGDocument() — получает сам SVG файл

Теперь SVG файл у нас «в руках» и мы можем делать с ним практически всё что угодно. Например можно обратиться к элементу по тегу (getElementsByTagName) или по его ID (getElementById)

// Получаем объект SVG
var SVG = document.getElementById("svg").getSVGDocument();
// Получаем элемент (тег) в SVG файле
var STYLE = SVG.getElementById('ID');

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

Чтобы было понятнее приведу сразу пример:

Ну а теперь обо всё по порядку.
Для начала создаем SVG файл.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">

<defs>
	<style type="text/css">
		<![CDATA[
			#r1{fill:red;}
			#r2{fill:yellow;}
			#r3{fill:blue;}
			#r4{fill:lime;}
			#r5{fill:aqua;}
		]]>
	</style>
</defs>

<g>
	<rect id="r1" width="200" height="200" x="0" y="0" />
	<rect id="r2" width="80" height="80" x="10" y="10" />
	<rect id="r3" width="80" height="80" x="110" y="110" />
	<rect id="r4" width="80" height="80" x="10" y="110" />
	<rect id="r5" width="80" height="80" x="110" y="10" />
</g>

</svg>

Подключаем jQuery, если он не подключен и сам файл на страницу

<embed id="svg" type="image/svg+xml" src="/путь_к_файлу/test.svg" height="200" width="200">

В примере выполняется своя функция «color» по клику на ссылке с необходимыми параметрами — цвет и ID элемента. Сами ссылки выглядят стандартно

<a onclick="color('ff00ff','r1');">rect 1</a>

Ну и JS функция «color»:

function color(new_color, rect){
	// Получаем объект SVG
	var SVG = document.getElementById("svg").getSVGDocument();
	// Получаем эелемент (тег) в SVG файле
	var STYLE = SVG.getElementById(rect);
	// Меняем стили с помощью jQ
	$(STYLE).css('fill', '#'+new_color);
}

Обратите внимания, что многие CSS свойства у SVG отличаются от HTML стилей. Так в примере вместо background-color необходимо писать fill

Данный пример проверен на работоспособность в последних версиях Firefox, Opera и Chrome (в более старых нет возможности сейчас проверить).

Демонстрация

На этом всё. Если будут вопросы — спрашивайте в комментариях.