javascript - 获取选定 SVG 元素的边界框

Question

我想阅读：

• width, height, x,y测量

对于特定的 SVG 元素。

---

我想最简单的方法是先获取最小边界框并读取它的属性。

我怎样才能访问这个？

Answer 1

如果您有对 DOM 节点的引用，请使用

svgNode.getBoundingClientRect()

https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect

编辑：SVG Edit 有一个方法可以返回当前选中的元素：

svgCanvas.getSelectedElems()

所以在上面的例子中：

svgNode = svgCanvas.getSelectedElems()[0];
svgNode.getBoundingClientRect();

Answer 2

有关示例和答案，请参阅http://granite.sru.edu/~ddailey/svg/BBox0M.svg。

简而言之，这段代码在 Chrome 中适用于我：

<script>
function foo(evt)
{
    console.log(evt.target.getBBox());      
}
</script>

<svg>
    <circle onclick="foo(evt)" r="20%" cx="50%" cy="50%"/>
</svg>

Answer 3

假设你有一个元素的句柄，我认为这会起作用，不是吗？

box = svgedit.utilities.getBBox(selected);

Answer 4

我不确定我是否理解正确，但如果你想获取 jQuery 元素的高度或宽度，请使用 width() 和 height()：

log("The svg is " + $("img").width() + "px wide.");
log("The svg is " + $("img").height() + "px tall.");

JSFiddle 示例：http: //jsfiddle.net/gGWU4/