SVGTransformList
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
SVGTransformList インターフェイスは、 SVGTransform オブジェクトのリストを定義します。
SVGTransformList オブジェクトは読み取り専用として指定することができます。すなわち、オブジェクトを変更しようとすると例外が発生するようにすることができます。
SVGTransformList オブジェクトはインデックス指定可能であり、配列のようにアクセスすることができます。
インスタンスプロパティ
numberOfItems-
リスト内のアイテム数です。
length-
リスト内のアイテム数です。
インスタンスメソッド
clear()-
リストから既存のアイテムをすべて削除し、リストを空にします。
initialize()-
リストから既存のアイテムをすべて削除し、引数で指定した単一のアイテムを保持するようにリストを再初期化します。挿入されたアイテムがすでにリストに含まれている場合、このリストに挿入される前に前のリストから除去されます。挿入されたアイテムはアイテムそのものであり、コピーされることはありません。返値は、リストに挿入されたアイテムです。
getItem()-
リストから指定されたアイテムを返します。返されるアイテムはアイテムそのものであり、コピーされるわけではありません。アイテムに加えられた変更は即座にリストに反映されます。最初のアイテムは数値
0です。 insertItemBefore()-
指定した位置に新しいアイテムをリストに挿入します。最初のアイテムのインデックスは
0です。挿入されるアイテムはアイテムそのものであり、コピーではありません。newItemがすでにリスト内にある場合、このリストに挿入される前に、前回あったリストから除去されます。アイテムがすでにこのリスト内にある場合、挿入するアイテムの位置は、アイテムが除去される前の時点のものであることに注意してください。indexが 0 である場合、新しいアイテムはリストの先頭に挿入されます。インデックスがnumberOfItems以上である場合、新しいアイテムはリストの末尾に追加されます。 replaceItem()-
リスト内の既存のアイテムを新しいアイテムに置き換えます。挿入されるアイテムはアイテムそのものであり、コピーではありません。
newItemがすでにリスト内に存在する場合は、このリストに挿入される前に、以前のリストから除去されます。アイテムがすでにこのリスト内に存在する場合は、置き換えられるアイテムのインデックスは、アイテムが除去される前であることに注意してください。 removeItem()-
リストから既存のアイテムを除去します。
appendItem()-
リストの末尾に新しいアイテムをを追加します。
newItemがすでにリスト内に存在する場合は、このリストに挿入される前に、以前のリストから除去されます。挿入されるアイテムはアイテムそのものであり、コピーではありません。 createSVGTransformFromMatrix()-
SVG_TRANSFORM_MATRIX型の変換に初期化され、その値が指定された行列であるSVGTransformオブジェクトを作成します。引数行列の値はコピーされます。この行列引数はSVGTransform::matrixに取りつけられません。 consolidate()-
別個の
SVGTransformオブジェクトのリストを、等価な変換行列を掛け合わせることで統合し、SVG_TRANSFORM_MATRIX型の単一のSVGTransformオブジェクトで構成されるリストを生成します。この統合操作では、新しいSVGTransformオブジェクトをリストの最初の、そして唯一のアイテムとして作成します。返されたアイテムはアイテムそのものであり、コピーではありません。アイテムに変更が加えられた場合、その変更は即座にリストに反映されます。
例
複数の SVGTransform オブジェクトの使用
この例では、クリックされた SVG 要素に 3 つの異なる変換を適用する関数を作成します。これを行うには、各変換（例えば、translate、rotate、scale）に対して別個の SVGTransform オブジェクトを作成します。 SVG 要素に関連付けられた SVGTransformList に変換オブジェクトを追加することで、複数の変換を適用します。
<svg
id="my-svg"
viewBox="0 0 300 280"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<desc>
例： SVGTransform オブジェクトを使用する SVG 要素を変換する方法を示します
</desc>
<script type="application/ecmascript">
<![CDATA[
function transformMe(evt) {
// svg root element to access the createSVGTransform() function
const svgRoot = evt.target.parentNode;
// SVGTransformList of the element that has been clicked on
const tfmList = evt.target.transform.baseVal;
// Create a separate transform object for each transform
const translate = svgRoot.createSVGTransform();
translate.setTranslate(50,5);
const rotate = svgRoot.createSVGTransform();
rotate.setRotate(10,0,0);
const scale = svgRoot.createSVGTransform();
scale.setScale(0.8,0.8);
// apply the transformations by appending the SVGTransform objects to the SVGTransformList associated with the element
tfmList.appendItem(translate);
tfmList.appendItem(rotate);
tfmList.appendItem(scale);
}
]]>
</script>
<polygon
fill="orange"
stroke="black"
stroke-width="5"
points="100,225 100,115 130,115 70,15 70,15 10,115 40,115 40,225"
onclick="transformMe(evt)" />
<rect
x="200"
y="100"
width="100"
height="100"
fill="yellow"
stroke="black"
stroke-width="5"
onclick="transformMe(evt)" />
<text x="40" y="250" font-family="Verdana" font-size="16" fill="green">
座標変換する図形をクリックしてください
</text>
</svg>
ライブプレビュー:
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGTransformList |