SVGTransformList: replaceItem() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

SVGTransformList 接口的 replaceItem() 方法用一个新项替换列表中的现有项。

插入的项是项本身,而不是副本。

  • 如果 newItem 已经存在于某个列表中,在将其插入到此列表之前,会先将其从之前的列表中移除。

  • 如果该项已经在此列表中,请注意要替换的项的 index 是在移除该项之前的值。

语法

js
replaceItem(newItem, index)

参数

newItem

要插入列表中的一个 SVGTransform 项。

index

一个 integer;新项应替换现有项的索引,为无符号长整型。

返回值

一个 SVGTransform 对象;从列表中插入的项。

异常

此方法可能会抛出以下类型之一的DOMException

NoModificationAllowedError DOMException

如果 SVGTransformList 对应于只读属性,或者对象本身是只读的,则会抛出此异常。

IndexSizeError DOMException

如果索引号大于或等于 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");

// Access the transform list of the <rect> element
const transformList = rectElement.transform.baseVal;

// Create a new rotation transformation
const rotateTransform = svgElement.createSVGTransform();
rotateTransform.setRotate(45, 50, 50);

transformList.replaceItem(rotateTransform, 0);

// Log the details of the new transformation
console.log(`New Transformation Type: ${transformList.getItem(0).type}`); // Output: 4 (e.g. SVG_TRANSFORM_ROTATE)

规范

规范
Scalable Vector Graphics (SVG) 2
# __svg__SVGNameList__replaceItem

浏览器兼容性

另见