Ответ 1
Похоже, у вас могут быть четыре вопроса:
- Как вставлять script в SVG файл?
- Как запустить script внутри SVG файла?
- Как получить доступ к данным для элемента
<path>из script? - Как я могу манипулировать данными для элемента
<path>из script?
Разрешить их по одному за раз:
Как вставлять script внутри SVG файла?
Как описано в спецификации SVG, вы можете поместить элемент <script> в свой документ, чтобы он содержал код JavaScript. Согласно последним спецификациям SVG вам не нужно указывать атрибут type для вашего script. По умолчанию он будет type="application/ecmascript".
- Другие распространенные типы mime включают
"text/javascript","text/ecmascript"(указанные в SVG 1.1),"application/javascript"и"application/x-javascript". У меня нет подробной информации о поддержке браузера для всех из них или об отсутствии атрибутаtype. Я всегда имел хороший успех сtext/javascript.
Как и в случае с HTML, вы можете либо поместить код script непосредственно в документ, либо ссылаться на внешний файл. При выполнении последнего вы должны использовать атрибут href (не src) для URI, с атрибутом в пространстве имен xlink.
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="/js/mycode.js" />
<script><![CDATA[
// Wrap the script in CDATA since SVG is XML and you want to be able to write
// for (var i=0; i<10; ++i )
// instead of having to write
// for (var i=0; i<10; ++i )
]]></script>
</svg>
Как запустить script внутри SVG файла?
Как и в случае с HTML, код, включенный в ваш документ SVG, будет запущен сразу же после его обнаружения. Если вы поместите свой элемент <script> над остальной частью вашего документа (как вы могли бы при размещении <script> в <head> документа HTML), ни один из ваших элементов документа не будет доступен, когда ваш код запущен.
Самый простой способ избежать этого - разместить элементы <script> в нижней части документа:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- all SVG content here, above the script -->
<script><![CDATA[
// Now I can access the full DOM of my document
]]></script>
</svg>
В качестве альтернативы вы можете создать функцию обратного вызова в верхней части документа, которая вызывается только тогда, когда остальная часть документа готова:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<title>SVG Coordinates for Embedded XHTML Elements</title>
<script>document.documentElement.addEventListener('load',function(){
// This code runs once the 'onload' event fires on the root SVG element
console.log( document.getElementById('foo') );
},false)</script>
<path id="foo" d="M0 0" />
</svg>
Как мне получить доступ к данным для элемента <path> из script?
Существует два способа доступа к большей информации об элементах в SVG: вы можете либо получить доступ к атрибуту в виде строки с помощью стандартного метода DOM Level 1 Core getAttribute(), или вы можете использовать объекты и методы SVG DOM. Давайте посмотрим на оба:
Доступ к данным пути через getAttribute()
Использование getAttribute() возвращает ту же строку, что и при просмотре источника:
<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
var path = document.getElementById('foo');
var data = path.getAttribute('d');
console.log(data);
//-> "M150 0 L75 200 L225 200 Z"
]]></script>
- Плюсы: очень просто позвонить; вам не нужно ничего знать о SVG DOM
- Con: поскольку вы возвращаете строку, вам нужно самостоятельно проанализировать атрибут; для данных SVG
<path>это может быть мучительным.
Доступ к данным пути через методы SVG DOM
<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
var path = document.getElementById('foo');
// http://www.w3.org/TR/SVG/paths.html#__svg__SVGAnimatedPathData__normalizedPathSegList
// See also path.pathSegList and path.animatedPathSegList and path.animatedNormalizedPathSegList
var segments = path.normalizedPathSegList ;
for (var i=0,len=segments.numberOfItems;i<len;++i){
var pathSeg = segments.getItem(i);
// http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg
switch(pathSeg.pathSegType){
case SVGPathSeg.PATHSEG_MOVETO_ABS:
// http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegMovetoAbs
console.log("Move to",pathSeg.x,pathSeg.y);
break;
case SVGPathSeg.PATHSEG_LINETO_ABS:
// http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegLinetoAbs
console.log("Line to",pathSeg.x,pathSeg.y);
break;
case SVGPathSeg.PATHSEG_CLOSEPATH:
// http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegClosePath
console.log("Close Path");
break;
}
}
]]></script>
Вышеупомянутый script выводит следующий результат:
Move to 150 0
Line to 75 200
Line to 225 200
Close Path
-
Плюсы: данные пути анализируются для вас; вы получаете точные числа от самого API; использование
normalizedPathSegListпринимает относительные команды и делает их абсолютными для вас; если анимация SMIL изменяет данные пути, использование неанимированного pathSegList может дать вам доступ к базовой, не анимированной информации, недоступной черезgetAttribute(). -
Минусы: Сладкие chimpunks a-flame, посмотрите на этот код! И это даже не обрабатывает все доступные доступные сегменты пути.
Потому что трудно прочитать спецификации W3C для SVG DOM, много лет назад я создал онлайн-инструмент для просмотра свойств и объектов. Вы можете использовать его здесь: http://objjob.phrogz.net/svg/hierarchy
Как я могу манипулировать данными для элемента <path> из script
Аналогично вышесказанному вы можете создать новую строку и использовать setAttribute(), чтобы перетащить ее на объект, или вы можете манипулировать SVG DOM.
Управление данными пути с помощью setAttribute()
<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
var path = document.getElementById('foo');
path.setAttribute('d','M150,0 L150,100 200,300 Z');
]]></script>
Управление данными пути с использованием SVG DOM
<path id="foo" d="M150,0 L75,200 l150,0 Z" />
<script><![CDATA[
var path = document.getElementById('foo');
var segments = path.pathSegList;
segments.getItem(2).y = -10;
]]></script>
В общем, вам просто нужно изменить свойства различных экземпляров подкласса SVGPathSeg; изменения немедленно вносятся в DOM. (В приведенном выше примере исходный треугольник перекошен, так как последняя точка немного сдвинута.)
Когда вам нужно создать новые сегменты пути, вам нужно использовать такие методы, как var newSegment = myPath.createSVGPathSegArcAbs(100,200,10,10,Math.PI/2,true,false), а затем использовать один из методов, чтобы вставить этот сегмент в список, например segments.appendItem(newSegment).