javascript - パス要素の高さと幅にアクセスするにはどうすればよいですか？

Question

svgパス要素があります。パス要素の高さ、幅、x、yにアクセスし、変更した後、元に戻したい

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

これどうやってするの？

Answer 1

getBBox（）を呼び出すことでバウンディングボックスを取得できるため、パスにid属性を指定します（例：id = "path1"）。その後、スクリプトで次のように記述します。

var bbox = document.getElementById（ "path1"）。getBBox（）;

bboxにはx、y、width、height属性がありますが、直接変更することはできません。

Answer 2

私はライブスニペットのファンなので：

var bbox = document.getElementById("path1").getBBox();

console.log(bbox);

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" id="path1"/>
</svg>