MultClip » Мастерская » SVG: добавление внешнего css и javascript в документ для web

SVG: добавление внешнего css и javascript в документ для web

Как встроить внешний css стиль и javascript в svg файл. В прошлой статье мы рассмотрели вариант интегрирования в svg документ css и js кода, однако, существует ещё один вариант добавления оных посредством загрузки их извне. Это полезно в случаях, когда сразу нескольким svg файлам необходимо присвоить один и тот же стиль и действия. Сам до сего момента ни разу ещё не пользовался этой возможностью, но вот случай подвернулся. Давайте разбираться.

Ниже представлен код готового svg с внешними css и javascript, которым можно пользоваться на практике:

Код svg файла «test.svg» с загрузкой внешнего css стиля и javascript скрипта:

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<?xml-stylesheet type='text/css' href='test_svg.css'?>
<svg
xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
_width='841' _height='594'
viewBox='0 0 841 594'
version='1.1'
xml:space='preserve'
id='multclip.ru'
onload='Init(evt)'>
	<script xlink:href='test_svg.js' />
	<title>Название svg доккумента.</title>
	<desc>Описание svg документа.</desc>

    <defs>
        <rect id='pr' width='20%' height='5%' />
    </defs>
    <rect id='fon' x='0' y='0' width='100%' height='100%' class='fon'/>
	<g id='spr'>
		<use id='pr_0' xlink:href='#pr' x='0' y='0' class='plv'/>
		<use id='pr_1' xlink:href='#pr' x='5%' y='5%' class='plv'/>
		<use id='pr_2' xlink:href='#pr' x='10%' y='10%' class='plv'/>
		<use id='pr_3' xlink:href='#pr' x='15%' y='15%' class='plv'/>
		<use id='pr_4' xlink:href='#pr' x='20%' y='20%' class='plv'/>
		<use id='pr_5' xlink:href='#pr' x='25%' y='25%' class='plv'/>
		<use id='pr_6' xlink:href='#pr' x='30%' y='30%' class='plv'/>
		<use id='pr_7' xlink:href='#pr' x='35%' y='35%' class='plv'/>
		<use id='pr_8' xlink:href='#pr' x='40%' y='40%' class='plv'/>
		<use id='pr_9' xlink:href='#pr' x='45%' y='45%' class='plv'/>
		<use id='pr_10' xlink:href='#pr' x='50%' y='50%' class='plv'/>
		<use id='pr_11' xlink:href='#pr' x='55%' y='55%' class='plv'/>
	</g>
	<text x='50%' y='83%' class='txt_st'>Запуск JS скрипта</text>
	<use xlink:href='#pr' x='40%' y='80%' class='btn'  onclick='gogo(evt)'/>
	<text x='50%' y='83%' class='txt_st'>Запуск JS скрипта</text>
	<use xlink:href='#pr' x='40%' y='80%' class='btn'  onclick='gogo(evt)'/>
	<a xlink:href='http://multclip.ru/infographic/' target='_blank'>
	<text x='50%' y='95%' class='txt_st'>© MultClip.ru</text></a>
</svg>

Код внешнего css файла «test_svg.css»:

.txt_st{
	font-size30px;
	font-family:sans-serif;
	font-family:arial;
	fill:#0093C8;
	text-anchor:middle;
}
.fon{
	fill:#fff;
	stroke:#ccc;
	stroke-width:2;
}
.btn{
	fill:#777;
	fill-opacity:0.3;
	stroke:#0093C8;
	stroke-width:2;
	cursor:pointer;
	transition: all 1s ease;
}
.btn:hover{
	fill:red;
	stroke:red;
}
.plv{
	transition: all 1s ease;
	fill:red;
}

Код внешнего js файла «test_svg.js»:

var svgDocument = null;
var svgRoot = null;
var full = null;
var cnt = 0;
function Init(evt){
	if (window.svgDocument==null){
		//svgDocument = evt.target.ownerDocument;
		svgDocument = evt.target.ownerDocument.getElementById('multclip.ru');
	}
	svgRoot = svgDocument;
	fnd=svgRoot.getElementById('spr');			
	full=fnd.getElementsByTagName('use').length;
	allnovis();
	//alert('full='+full);
}
function gogo(evt){
	if(cnt<full-1){
		cnt++;
	}else{
		cnt=0;
		allnovis()
	}
	console.log(full +' = '+ cnt);
	govis();
}
function allnovis(){
	for (var i = 1; i < full; i++) {
		var fn=svgRoot.getElementById('pr_'+i);
		fn.setAttributeNS(null, 'fill-opacity', '1');
	}
}
function govis(){
	var fn=svgRoot.getElementById('pr_'+cnt);
	fn.setAttributeNS(null, 'fill-opacity', '0');
}

Основой выбран svg файл, рассматриваемым в предыдущей статье (можете кликнуть и сравнить код).

Работать с кодом очень просто:

Создайте любым текстовым редактором [Notepad++/Brackets/Блокнот] 3 новых документа в текущей папке.
Сохраните 3 файла: «test.svg», «test_svg.css» и «test_svg.js» в кодировке (!) Unicode: UTF-8 без BOM.
Скопируйте предлагаемый код и вставьте его в тело каждого из пустых файлов.
Сохраните изменения.
Откройте файл любым современным браузером (кроме IE).
Оцените результат интерактивного решения и, при необходимости, исправьте код.

Строку _width='841' _height='594' можно удалить, если нужно получить адаптивный «резиновый» вариант или исправить на width='841' height='594', чтобы размер svg документа был точным.

Использование внешних css стилей и внешних javascript скриптов позволяет заметно оптимизировать svg документ, а также позволит удобно вносить изменение в работе интерактивной web графики. Стоит отметить, что если Вы используете svg элементы на странице сайта, то нет особого смысла вызывать их напрямую из самого svg, а лучше подгружать css стили и js непосредственно из странички стандартным способом.

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

Метки статьи:
#уроки
#svg
#javascript