SVG
スクリプティング
サーチ…
備考
ネイティブDOMインターフェイスを使用したSVGのスクリプティングは、現在わずかな変更の状態で（2016年）行われています。現在のSVG標準（1.1）は、ほとんどの主要なWebブラウザでうまく実装されています。しかし、SVG 2.0標準が開発中であるため、一部のブラウザでは2.0で廃止されるSVG 1.1機能が削除され始めています。 SVG 2.0の付録LのSVG 1.1からSVG 2.0への提案された変更の完全なリストを見ることができます。
pathSegListと他のSVGPathSeg使用法の置き換え
SVG 1.1の<path>要素には、すべてのパスコマンドのネイティブ表現にアクセスできるpathSegListプロパティが定義されています 。 Google Chrome v48では、2015年末にこのプロパティが削除され 、SVG 2.0の代替候補として準備されています 。 SVG 2.0のサポートが追加されるまでは、ポリフィールを使用して1.1の機能を元に戻すか、提案された2.0 APIを実装する必要があります 。
getTransformToElement()置き換える
Chrome v48では、 SVGGraphicsElement.getTransformToElement()メソッドも削除されました。 古いメソッドを実装するための単純なポリフィルが存在します 。
要素の作成
SVG要素の作成と変更を理解する最も簡単な方法は、HTMLやXMLの場合と同様に、 DOM Level 2 Coreインターフェイスを使用して要素を操作することです。
「：この例では- JavaScriptから作成された要素は、SVG要素で宣言され、同じ名前空間内に作成されていることが不可欠ですhttp://www.w3.org/2000/svg 」。しかし、SVG要素のほとんどすべての属性はどの名前空間にもありません。それらをSVG名前空間に配置してはいけません 。
ここでは、HTMLの内部でホストされているSVGを紹介します。これは一般的なケースです。
<!doctype HTML>
<html><title>Creating an Element</title>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%"
viewBox="0 0 400 300"></svg>
<script>
var svgNS = "http://www.w3.org/2000/svg";
// Create a circle element (not part of the DOM yet)
var circle = document.createElementNS(svgNS,'circle'); // Creates a <circle/>
circle.setAttribute('fill','red'); // Note: NOT setAttributeNS()
circle.setAttribute('cx',150); // setAttribute turns 150 into a string
circle.setAttribute('cy','80'); // using a string works, too
circle.setAttribute('r',35); // give the circle a radius so we can see it
// Now, add the circle to the SVG document so we can see it
var svg = document.querySelector('svg'); // the root <svg> element
svg.appendChild(circle);
</script>
</body></html>
特定の名前空間に作成する必要のある属性がいくつかあります。それらは、 SVG属性索引の名前にコロンでリストされたものです。具体的には、以下のとおりです。 xlink:actuate 、 xlink:arcrole 、 xlink:href 、 xlink:role 、 xlink:show 、 xlink:title 、 xlink:type 、 xml:base 、 xml:lang 、およびxml:space 。 setAttributeNS()を使用してこれらの属性を設定します。
var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
var img = document.createElementNS( svgNS, 'image' );
img.setAttributeNS( xlinkNS, 'href', 'my.png' );
多くの場合、特に多くの属性を持つ要素を頻繁に作成する場合、次のようなヘルパー関数を使用すると、入力を省き、間違いを避け、コードを読みやすくします。
<!doctype HTML>
<html><title>Creating an Element</title>
<body>
<svg xmlns="http://www.w3.org/2000/svg"></svg>
<script>
var svg = document.querySelector('svg');
var circle = createOn( svg, 'circle', {fill:'red', cx:150, cy:80, r:35} );
// Create an SVG element on another node with a set of attributes.
// Attributes with colons in the name (e.g. 'xlink:href') will automatically
// find the appropriate namespace URI from the SVG element.
// Optionally specify text to create as a child node, for example
// createOn(someGroup,'text',{x:100,'text-anchor':'middle'},"Hello World!");
function createOn(parentEl,name,attrs,text){
var doc=parentEl.ownerDocument, svg=parentEl;
while (svg && svg.tagName!='svg') svg=svg.parentNode;
var el = doc.createElementNS(svg.namespaceURI,name);
for (var a in attrs){
if (!attrs.hasOwnProperty(a)) continue;
var p = a.split(':');
if (p[1]) el.setAttributeNS(svg.getAttribute('xmlns:'+p[0]),p[1],attrs[a]);
else el.setAttribute(a,attrs[a]);
}
if (text) el.appendChild(doc.createTextNode(text));
return parentEl.appendChild(el);
}
</script>
</body></html>
読み書き属性
SVG要素から値を読み書きするには、 DOMレベル2コアメソッドgetAttribute() 、 getAttributeNS() 、 setAttribute()およびsetAttributeNS()を使用するか、 SVG 1.1 IDLで指定されたカスタムプロパティおよびメソッドを使用できます定義言語）。
単純な数値属性
たとえば、SVGサークル要素がある場合は次のようになります。
<circle id="circ" cx="10" cy="20" r="15" />
DOMメソッドを使用して属性を読み書きすることができます。
var circ = document.querySelector('#circ');
var x = circ.getAttribute('cx') * 1; // Use *1 to convert from string to number value
circ.setAttribute('cy', 25);
...またはSVGCircleElement定義されているカスタムcx 、 cy 、およびrプロパティを使用できます。これらは直接数値ではなく、SVG 1.1の多くのアクセサと同様に、アニメーション値へのアクセスを可能にします。これらのプロパティはSVGAnimatedLength型SVGAnimatedLength 。アニメーションと長さの単位を無視すると、次のような属性を使用できます。
var x = circ.cx.baseVal.value; // this is a number, not a string
circ.cy.baseVal.value = 25;
変換
SVGグループを使用して、複数のグラフィック要素全体を移動、回転、拡大縮小、その他の方法で変形することができます。 （SVGの翻訳の詳細については、 第7章を参照してください）。ここでは、 transform調整することによってサイズ、ローテーション、および配置を調整することができるスマイリーな顔を作るグループがあります：
<g id="smiley" transform="translate(120,120) scale(5) rotate(30)">
<circle r="20" fill="yellow" stroke-width="2"/>
<path fill="none" d="M-10,5 a 5 3 0 0 0 20,0" stroke-width="2"/>
<circle cx="-6" cy="-5" r="2" fill="#000"/>
<circle cx="6" cy="-5" r="2" fill="#000"/>
</g>
スクリプトを使用してDOMメソッドを使用してスケールを調整するには、 transform属性全体を文字列として操作する必要があります。
var face = document.querySelector('#smiley');
// Find the full string value of the attribute
var xform = face.getAttribute('transform');
// Use a Regular Expression to replace the existing scale with 'scale(3)'
xform = xform.replace( /scale\s*\([^)]+\)/, 'scale(3)' );
// Set the attribute to the new string.
face.setAttribute('transform',xform);
SVG DOMを使用すると、リスト内の特定のトランスフォームをトラバースし、目的のトランスフォームを見つけて値を変更できます。
var face = document.querySelector('#smiley');
// Get the SVGTransformList, ignoring animation
var xforms = face.transform.baseVal;
// Find the scale transform (pretending we don't know its index)
for (var i=0; i<xforms.numberOfItems; ++i){
// Get this part as an SVGTransform
var xform = xforms.getItem(i);
if (xform.type == SVGTransform.SVG_TRANSFORM_SCALE){
// Set the scale; both X and Y scales are required
xform.setScale(3,3);
break;
}
}
- 変換回数をトラバースして操作するには、
SVGTransformList参照してください。 - 個々の変換を操作するには、
SVGTransform参照してください。
SVG要素のドラッグ
マウスを使用してSVG要素（または要素のグループ）をドラッグするには、次の操作を行います。
-
mousedownハンドラを追加すると、ドラッグ中に使用する要素に翻訳を追加し（必要な場合）、mousemoveイベントを追跡し、ドラッグを終了するためのmouseupハンドラを追加してドラッグを開始します。 -
mousemove間に、マウスの位置をスクリーン座標からドラッグしているオブジェクトのローカル座標に変換し、それに応じて翻訳を更新します。 - 期間中
mouseup、取り外しmousemoveとmouseupハンドラを。
// Makes an element in an SVG document draggable.
// Fires custom `dragstart`, `drag`, and `dragend` events on the
// element with the `detail` property of the event carrying XY
// coordinates for the location of the element.
function makeDraggable(el){
if (!el) return console.error('makeDraggable() needs an element');
var svg = el;
while (svg && svg.tagName!='svg') svg=svg.parentNode;
if (!svg) return console.error(el,'must be inside an SVG wrapper');
var pt=svg.createSVGPoint(), doc=svg.ownerDocument;
var root = doc.rootElement || doc.body || svg;
var xlate, txStartX, txStartY, mouseStart;
var xforms = el.transform.baseVal;
el.addEventListener('mousedown',startMove,false);
function startMove(evt){
// We listen for mousemove/up on the root-most
// element in case the mouse is not over el.
root.addEventListener('mousemove',handleMove,false);
root.addEventListener('mouseup', finishMove,false);
// Ensure that the first transform is a translate()
xlate = xforms.numberOfItems>0 && xforms.getItem(0);
if (!xlate || xlate.type != SVGTransform.SVG_TRANSFORM_TRANSLATE){
xlate = xforms.createSVGTransformFromMatrix( svg.createSVGMatrix() );
xforms.insertItemBefore( xlate, 0 );
}
txStartX=xlate.matrix.e;
txStartY=xlate.matrix.f;
mouseStart = inElementSpace(evt);
fireEvent('dragstart');
}
function handleMove(evt){
var point = inElementSpace(evt);
xlate.setTranslate(
txStartX + point.x - mouseStart.x,
txStartY + point.y - mouseStart.y
);
fireEvent('drag');
}
function finishMove(evt){
root.removeEventListener('mousemove',handleMove,false);
root.removeEventListener('mouseup', finishMove,false);
fireEvent('dragend');
}
function fireEvent(eventName){
var event = new Event(eventName);
event.detail = { x:xlate.matrix.e, y:xlate.matrix.f };
return el.dispatchEvent(event);
}
// Convert mouse position from screen space to coordinates of el
function inElementSpace(evt){
pt.x=evt.clientX; pt.y=evt.clientY;
return pt.matrixTransform(el.parentNode.getScreenCTM().inverse());
}
}
