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>