獲取所選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

我不確定我是否正確理解你，但是如果你想獲得jQuery元素的高度或寬度，請使用width（）和height（）：

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

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

Answer 4

假設你有元素的句柄，我會認為這會起作用，不是嗎？

box = svgedit.utilities.getBBox(selected);