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 2015年7月.
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 |