MultClip » Мастерская » SVG: встроенный css стиль и javascript код внутри документа

SVG: встроенный css стиль и javascript код внутри документа

Как встроить css стиль и javascript в svg файл. Вопрос довольно часто возникает перед разработчиками, создающими интерактивный контент для web проектов. При помощи этого шаблона можно быстро создать svg документ с расширенными возможностями. Категорически пользуйтесь, не жалко… Мне тоже иногда попадаются годные статьи, в которых авторы делятся идеями и находками… Чем я - лучше/хуже…

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

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<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)'>

    <style type='text/css' >
    <![CDATA[
    .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;
    }
    ]]>
    </style>

    <script type='text/javascript'>
        <![CDATA[
		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');
		}
        
        ]]>
    </script>

	<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)'/>
	<a xlink:href='http://multclip.ru/infographic/' target='_blank'>
	<text x='50%' y='95%' class='txt_st'>© MultClip.ru</text></a>
</svg>

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

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

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

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