HTML5 12 での SVG 2D の概要 - SVG DOM および DOM 操作の概要_html5 チュートリアル スキル

スクリプトを使用すると、さまざまな複雑なタスクを簡単に完了でき、アニメーションやインタラクションを完了するための主流の方法でもあります。 SVG は HTML の要素であるため、通常の DOM 操作をサポートします。また、SVG は本質的に XML ドキュメントであるため、主に SVG DOM と呼ばれる特別な DOM 操作もあります。もちろん、IE は現在 SVG をサポートしていないため、IE に基づいて SVG ページを開発するには別の方法が必要です。この部分の知識は実際には誰もがよく知っているので、簡単に見てみましょう。

HTML ページでの DOM 操作
DOM については、次のような簡単な例を参照してください。 >コードをコピーします

コードは次のとおりです:

#svgContainer {

width: 400px ;

高さ: 400px;

背景色: #a0a0a0;

関数 CreateSVG () = "http://www.w3.org/2000/svg";
var boxWidth = 300;
var svgElem = document.createElementNS (xmlns, "svg");
svgElem.setAttributeNS (null, "viewBox", "0 0 " boxWidth " " boxHeight);
svgElem.setAttributeNS (null, "width", boxWidth); " , 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"); setAttributeNS (null, "offset", "100%");
stopBottom.setAttributeNS (null, "stop-color", "#0000ff");
grad.appendChild (stopBottom); appendChild (grad);
g.appendChild (defs);
var coords = "l 0, 300"; coords = " l 300, 0";
coords = " l -300, 0";
var path = document.createElementNS (xmlns, "path") ) ;
path.setAttributeNS (null, 'ストローク', "#000000");
path.setAttributeNS (null, 'ストローク幅', 10); - linejoin', "round");
path.setAttributeNS (null, 'd', coords);
path.setAttributeNS (null, 'fill', "url(#gradient)");パス .setAttributeNS (null, 'opacity', 1.0);
g.appendChild (パス);
svgContainer.appendChild (svgElem); > }

;



お気づきかと思いますが、通常の HTML 要素の DOM 操作はまったく同じです。
要素の選択: document.getElementById
要素の作成: document.createElementNS
子要素を作成する別の方法: 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 で終わり、関連する名前空間を提供することに注意してください。関連する属性を設定する場合、element.setAttribute を直接使用して属性値を設定するなど、NS のないバージョンを使用することも選択できますが、一般的には、NS で終わるバージョンを使用することを強くお勧めします。このバージョンでは、複数の名前空間の場合でも常に正常に動作します。
SVG DOM
これは標準の DOM とどう違うのですか? 現在のところ、属性の割り当て方法が異なることだけがわかります。このことを知っている学生がいたら教えてください。
上記の例では、element.setAttributeNS/element.setAttribute を使用して属性に値を割り当てています。SVG DOM では、ドットにアクセスすることでオブジェクト指向のメソッドを使用してオブジェクトの属性に値を割り当てることができます。たとえば、次の 2 つのメソッドの比較:
一般的な DOM メソッド:

コードをコピーします

コードは次のとおりです。

element.setAttribute("x", "10");
element.setAttribute("y", "20"); ("width", "100%");
element.setAttribute("height", "2em");

SVG DOM の方法:

コードをコピーします コードは次のとおりです。

element.x.baseVal.value = 10; .y.baseVal.value = 20;
element.width .baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100);
element.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS, 10); >
DOM スクリプトは伝統的なスクリプトであり、Construct の「値文字列」を渡して個々の項目を設定するのが特徴です。 SVG DOM スクリプト スタイルの利点は、「値文字列」を作成する必要がないため、DOM スクリプトよりもパフォーマンスが優れていることです。

SVG に埋め込まれたスクリプト

SVG 内にスクリプトを追加したい場合は、これとは別に、基本的には script 要素を使用する必要があります。外部HTMLにスクリプトを入れるのと同じです。例を見てみましょう:



コードをコピーします

コードは次のとおりです:

このテキストをクリックすると、四角形の色が表示されます。
四角形をクリックして四角形領域を表示します。
このテキストをクリックすると子の数が表示されます
ルート要素の要素。