SVGTransformList: clear() メソッド

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.

clear()SVGTransformList インターフェイスのメソッドで、リストからすべてのアイテムを除去し、リストを空にします。

構文

js
clear()

引数

なし。

返値

なし (undefined)。

例外

NoModificationAllowedError DOMException

SVGTransformList が読み取り専用属性に対応する場合、またはオブジェクト自体が読み取り専用である場合に発生します。

SVG 要素からすべての座標変換をクリア

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;

// <rect> 要素への移動座標変換を適用
const translateTransform = svgElement.createSVGTransform();
translateTransform.setTranslate(50, 50);
transformList.appendItem(translateTransform);

// クリア前の座標変換の数
console.log(
  `クリア前の座標変換の数: ${transformList.length}`,
); // 出力: 1

// リストからすべての座標変換をクリア
transformList.clear();

// クリア後の座標変換の数
console.log(
  `クリア後の座標変換の数: ${transformList.length}`,
); // 出力: 0

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGNameList__clear

ブラウザーの互換性

関連情報