SVGTransformList: replaceItem() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
replaceItem() は SVGTransformList インターフェイスのメソッドで、リスト内の既存のアイテムを新しいアイテムに置き換えます。
挿入されるアイテムはアイテムそのものであり、コピーではありません。
-
newItemがすでにリスト内に存在する場合は、このリストに挿入される前に、以前のリストから除去されます。 -
アイテムがすでにこのリスト内に存在する場合は、置き換えられるアイテムの
indexは、アイテムが除去される前であることに注意してください。
構文
js
replaceItem(newItem, index)
引数
newItem-
リストに挿入する
SVGTransformアイテムです。 index-
integerです。新しいアイテムが既存のアイテムを置き換えるインデックスを unsigned long で表します。
返値
SVGTransform オブジェクトで、リストに追加されたアイテムを表します。
例外
このメソッドは、次の型の DOMException を発生させる可能性があります。
NoModificationAllowedErrorDOMException-
SVGTransformListが読み取り専用属性に対応する場合、またはオブジェクト自体が読み取り専用である場合に発生します。 IndexSizeErrorDOMException-
インデックス番号が
numberOfItems以上であった場合に発生します。
例
リスト内の座標変換尾の置き換え
html
<svg width="200" height="200" id="mySvg">
<rect width="100" height="100" fill="blue" transform="translate(50,50)" />
</svg>
js
const svgElement = document.querySelector("svg");
const rectElement = svgElement.querySelector("rect");
// <rect> 要素の座標変換リストへのアクセス
const transformList = rectElement.transform.baseVal;
// 新しい回転座標変換を作成
const rotateTransform = svgElement.createSVGTransform();
rotateTransform.setRotate(45, 50, 50);
transformList.replaceItem(rotateTransform, 0);
// 新しい変換の詳細をログ出力
console.log(`New Transformation Type: ${transformList.getItem(0).type}`); // 出力: 4 (e.g. SVG_TRANSFORM_ROTATE)
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGNameList__replaceItem |