スクリプトを使用すると、さまざまな複雑なタスクを簡単に完了できます。また、アニメーションとインタラクションを完了する主流の方法でもあります。 SVGはHTMLの要素であるため、通常のDOM操作をサポートします。 SVGは基本的にXMLドキュメントであるため、主にSVG DOMと呼ばれる特別なDOM操作もあります。もちろん、IEは現在SVGをサポートしていないため、IEに基づいてSVGページを開発するにはさまざまな方法が必要です。誰もが実際に知識のこの部分に非常に精通しているので、以下で簡単に見てみましょう。
HTMLページでのDOM操作誰もがDOMに精通している必要があります。ここに小さな例があります：
<head>
<style>
#svgcontainer {
幅：400px;
高さ：400px;
バックグラウンドカラー：＃a0a0a0;
}
</style>
<スクリプト>
function createSvg（）{
var xmlns = "http://www.w3.org/2000/svg";
var boxwidth = 300;
var boxheight = 300;
var svgelem = document.createelementns（xmlns、 "svg"）;
svgelem.setattributens（null、 "viewbox"、 "0 0" + boxwidth + "" + boxheight）;
svgelem.setattributens（null、 "width"、boxwidth）;
svgelem.setattributens（null、 "height"、boxheight）;
svgelem.style.display = "block";
var g = document.createelementns（xmlns、 "g"）;
svgelem.appendchild（g）;
g.setattributens（null、 'transform'、 'matrix（1,0,0、-1,0,300）'）;
//線形勾配を描画します
var defs = document.createelementns（xmlns、 "defs"）;
var grad = document.createelementns（xmlns、 "lineargradient"）;
grad.setattributens（null、 "id"、 "gradient"）;
grad.setattributens（null、 "x1"、 "0％"）;
grad.setattributens（null、 "x2"、 "0％"）;
grad.setattributens（null、 "y1"、 "100％"）;
grad.setattributens（null、 "y2"、 "0％"）;
var stoptop = document.createElementns（xmlns、 "stop"）;
stoptop.setattributens（null、 "offset"、 "0％"）;
stoptop.setattributens（null、 "stop-color"、 "＃ff0000"）;
Grad.AppendChild（StopTop）;
var stopbottom = document.createelementns（xmlns、 "stop"）;
stopbottom.setattributens（null、 "offset"、 "100％"）;
StopBottom.setattributens（null、 "stop-color"、 "＃0000ff"）;
Grad.AppendChild（StopBottom）;
defs.AppendChild（grad）;
G.AppendChild（defs）;
//境界線を描きます
var coordinates = "m 0、0";
座標 += "l 0、300";
座標 += "l 300、0";
coords += "l 0、-300";
coords += "l -300、0";
var path = document.createelementns（xmlns、 "path"）;
path.setattributens（null、 'stroke'、 "＃000000"）;
path.setattributens（null、 'stroke-width'、10）;
path.setattributens（null、 'stroke-linejoin'、 "round"）;
path.setattributens（null、 'd'、座標）;
path.setattributens（null、 'fill'、 "url（#gradient）"）;
path.setattributens（null、 'ofacity'、1.0）;
G.AppendChild（PATH）;
var svgcontainer = document.getElementById（ "svgContainer"）;
svgContainer.AppendChild（SVGELEM）;
}
</script>
</head>
<body onload = "createsvg（）">
<div id = "svgcontainer"> </div>
</body>
発見しましたか？これは、通常のHTML要素のDOM操作とまったく同じです。
要素を選択：document.getElementByID
要素を作成：document.createElementns
子要素を作成する別の方法：element.createchildns
要素を追加：node.appendChild
要素の属性を設定します：element.setattributens/element.setattribute
上記の操作に加えて、次の操作とプロパティも非常に一般的です。
要素の属性値を取得します：element.getAttributens/element.getAttribute
属性が要素に存在するかどうかを確認します：element.hasattributens
要素の属性を削除します：element.Removeattributens
親要素、子要素、兄弟ノード：element.parentnode/element.firstchild/child.nextsibling
これらの方法は、ここでは詳細に紹介されません。さらに、DOMツリーのノード構造とオブジェクト間の継承関係は類似しているため、詳細に説明しません。それを必要とする学生は、以下のDOMコアオブジェクトのドキュメントを参照します。
ただし、SVGは本質的にXMLドキュメントであるため、DOMメソッドは基本的に使用する方法であり、NSが関連する名前空間を提供する方法であることに注意する必要があります。要素を作成するときに名前空間が既に提供されており、複数の名前空間に問題がない場合、関連属性を設定するときは、ement.setattributeを使用して属性値を直接設定するなど、NSなしでバージョンを使用することもできます。ただし、一般に、このバージョンは複数の名前空間の場合でも通常は正常に機能するため、NSエンディングのバージョンを使用することを強くお勧めします。
SVG DOMこれと標準的なDOMに関する包括的な情報は見つかりませんでした。現在、私は属性の割り当て方法が異なることのみを知っています。これを理解している学生がいる場合は、メッセージを教えてください。上記の例では、element.setattributens/element.setattributeを使用して、属性に値を割り当てます。 SVG DOMでは、オブジェクト指向の方法を使用して、アクセスポイントを介してオブジェクト属性に値を割り当てることができます。たとえば、以下は2つの方法の比較です。
通常のDOMメソッド：
element.setattribute（ "x"、 "10"）;
element.setattribute（ "y"、 "20"）;
element.setattribute（ "width"、 "100％"）;
element.setattribute（ "height"、 "2em"）;
およびSVG DOMメソッド：
element.x.baseval.value = 10;
element.y.baseval.value = 20;
element.width.baseval.newvaluespecifedunits（svglength.svg_lengthtype_percentage、100）;
element.height.baseval.newvaluespecifedunits（svglength.svg_lengthtype_ems、10）;
DOMスクリプトは従来のスクリプトであり、その特性は、値文字列を構築することにより個々のアイテムを設定することです。 SVG DOMスクリプトスタイルの利点は、バリュー文字列を構築する必要がないため、パフォーマンスがDOMスクリプトよりも優れていることです。
SVGに組み込まれたスクリプトSVG内にスクリプトを追加する場合は、スクリプト要素を使用する必要があります。これは前に言及されています。これに加えて、基本的にはスクリプトを外部のHTMLに置くことと同じです。例を参照してください：
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<svg xmlns = "http://www.w3.org/2000/svg" xmlns：xlink = "http://www.w3.org/1999/xlink">
<script type = "text/ecmascript">
<！[cdata [
関数showRectColor（）{
alert（document.getElementById（ "mybluerect"）。getattributens（null、 "fill"））;
}
関数showrectarea（evt）{
var width = parsefloat（evt.target.getattributens（null、 "width"））;
var height = parsefloat（evt.target.getattributens（null、 "height"））;
アラート（ "長方形の領域は：" +（width * height））;
}
関数showrootchildrennnr（）{
Alert（ "nr of Children："+document.documentelement.childnodes.length）;
}
]]>
</script>
<g id = "firstGroup">
<rect id = "mybluerect" x = "40" y = "20" fill = "blue" onclick = "showrectarea（evt）"/>
<text x = "40" y = "100" onclick = "showrectcolor（）">このテキストをクリックして長方形の色を表示します。</text>
<テキストx = "40" y = "130">長方形をクリックして長方形の領域を表示します。</text>
<text x = "40" y = "160" onclick = "showrootchildrennr（）">このテキストをクリックして子供の数を表示する
<tspan x = "40" dy = "20">ルート要素の要素。</tspan> </text>
</g>
</svg>
</body>
</html>
この例では、DOMオブジェクトを取得する一般的な方法がリストされています。1. document.getElementByIDまたはdocument.getElementByClassNameなどのメソッドを使用してオブジェクトを取得します。
2。document.documentelementまたはdocument.rootelementを使用してドキュメントオブジェクトを取得します。
3.イベントパラメーターevt.targetを介してイベントを生成するオブジェクトを取得します。この方法の利点は、IDを使用せずにイベントを生成するオブジェクトを取得できることです。
残りのスクリプトは、基本的に通常のDOMと同じです。
実用的なリファレンス：スクリプトインデックス：http：//msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開発センター：https：//developer.mozilla.org/en/svg
人気リファレンス：http：//www.chinasvg.com/
公式文書：http：//www.w3.org/tr/svg11/
DOMコアオブジェクトAPI：http：//reference.sitepoint.com/javascript/document
SVG DOMの一般的なプロパティと方法：http：//riso.iteye.com/blog/393454、http：//riso.iteye.com/blog/393459