4つの質問があるようです。
- SVGファイル内にスクリプトを埋め込むにはどうすればよいですか？
- SVGファイル内でスクリプトを実行するにはどうすればよいですか？
<path>スクリプトから要素のデータにアクセスするにはどうすればよいですか？<path>スクリプトから要素のデータを操作するにはどうすればよいですか？
一度に1つずつ取り組みましょう。
SVGファイル内にスクリプトを埋め込むにはどうすればよいですか？
SVG仕様で説明されているように<script>、JavaScriptコードを含む要素をドキュメントに配置できます。最新のSVG仕様によれば、スクリプトの属性を指定する必要はありません。typeデフォルトはになりますtype="application/ecmascript"。
- 他の一般的なmimeタイプには、、
"text/javascript"（"text/ecmascript"SVG 1.1で指定）、、、"application/javascript"およびが含まれ"application/x-javascript"ます。typeこれらすべてのブラウザサポート、または属性を完全に省略したことについての詳細な情報はありません。私はいつもで良い成功を収めてきましたtext/javascript。
HTMLと同様に、スクリプトコードをドキュメントに直接配置することも、外部ファイルを参照することもできます。後者を実行するときは、名前空間の属性とともに、URIのhref属性（ではなく）を使用する必要があります。srcxlink
<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>
SVGファイル内でスクリプトを実行するにはどうすればよいですか？
HTMLと同様に、SVGドキュメントに含まれているコードは検出されるとすぐに実行されます。<script>要素をドキュメントの残りの部分の上に配置すると（HTMLドキュメントを挿入<script>する<head>場合のように）、コードの実行中にドキュメント要素を使用できなくなります。
これを回避する最も簡単な方法は、<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>スクリプトから要素のデータにアクセスするにはどうすればよいですか？
SVGの要素に関するほとんどの情報にアクセスするには、2つの方法があります。標準のDOMレベル1コアメソッドを介して文字列として属性にアクセスするか、SVGDOMオブジェクトとメソッドgetAttribute()を使用できます。両方を見てみましょう：
を介してパスデータにアクセスする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>
- 長所：呼び出すのは非常に簡単です。SVGDOMについて何も知る必要はありません
- 短所：文字列が返されるので、属性を自分で解析する必要があります。SVG
<path>データの場合、これは耐え難いものになる可能性があります。
SVGDOMメソッドを介したパスデータへのアクセス
<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>
上記のスクリプトは、次の出力を生成します。
Move to 150 0
Line to 75 200
Line to 225 200
Close Path
長所：パスデータが解析されます。API自体から正確な数値を取得します。usingnormalizedPathSegListは相対コマンドを取り、それらを絶対的なものにします。SMILアニメーションがパスデータを変更している場合、アニメーション化されていないpathSegListを使用すると、を介して利用できないベースのアニメーション化されていない情報にアクセスできますgetAttribute()。
短所：甘いチンパンクが炎上している、そのコードを見てください！そして、それは利用可能なすべての可能なパスセグメントを処理するわけではありません。
SVG DOMのW3C仕様を読むのは難しい場合があるため、何年も前に、存在するプロパティとオブジェクトを参照するためのオンラインツールを作成しました。ここで使用できます：http：//objjob.phrogz.net/svg/hierarchy
<path>スクリプトから要素のデータを操作するにはどうすればよいですか
上記と同様に、新しい文字列を作成してsetAttribute()それをオブジェクトに押し付けるために使用するか、SVGDOMを操作することができます。
を使用してパスデータを操作する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>
SVGDOMを使用したパスデータの操作
<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)してから、このセグメントをリストに貼り付けるためのメソッドの1つを使用する必要がありますsegments.appendItem(newSegment)。