獲取SVG路徑的邊界框

-1

http://codepen.io/netsi1964/full/vNoemp/

我的路徑和需要知道它的邊框作爲rect元素，它的X，Y，寬度和高度定的代碼

<path d="M147.5 55.8c-5.8-7.2-13.6-14.4-25.5-14.4-8.4 0-15.4 8.2-27 8.2-9 0-13-7.8-23-7.8C51.4 41.8 31 60.4 31 84.5c0 12.8 4.2 32.5 13.6 49.7C51 146.7 59.4 155 69 155c6.7 0 14.7-6.3 24.2-6.3 8.4 0 16.2 5.6 23.8 5.6 18 0 35-23.5 35-39.3 0-.8-.3-1.4-.3-2v-1c-11.8-6.3-18.2-15.7-18.2-29.3 0-11 4.8-20.5 13.6-26.7l.5-.2zm-53-8.8c13.7-4.2 26.3-14.4 26.3-32 0-1.5-.2-3.3-.4-5.3l-.2-.8C106.4 12.6 94 23.4 94 40.3c0 1.6.2 3.6.6 5.8v.8z" style="translate(0px,-212.47488403320312px) scale(1,1)" >

，並知道RECT性能

來源

2016-10-29 rafat mansour

使用純JavaScript：給你的路徑的ID，並得到使用01其邊框。

var myPathBox = document.getElementById("myPath").getBBox(); 
console.log(myPathBox);

這裏是一個演示：

var myPathBox = document.getElementById("myPath").getBBox(); 
 
console.log(myPathBox);

<svg width="400" height="400"> 
 
\t <path id="myPath" d="M147.5 55.8c-5.8-7.2-13.6-14.4-25.5-14.4-8.4 0-15.4 8.2-27 8.2-9 0-13-7.8-23-7.8C51.4 41.8 31 60.4 31 84.5c0 12.8 4.2 32.5 13.6 49.7C51 146.7 59.4 155 69 155c6.7 0 14.7-6.3 24.2-6.3 8.4 0 16.2 5.6 23.8 5.6 18 0 35-23.5 35-39.3 0-.8-.3-1.4-.3-2v-1c-11.8-6.3-18.2-15.7-18.2-29.3 0-11 4.8-20.5 13.6-26.7l.5-.2zm-53-8.8c13.7-4.2 26.3-14.4 26.3-32 0-1.5-.2-3.3-.4-5.3l-.2-.8C106.4 12.6 94 23.4 94 40.3c0 1.6.2 3.6.6 5.8v.8z" style="translate(0px,-212.47488403320312px) scale(1,1)" > 
 
\t </svg>

來源

2016-10-29 04:42:28

@Gerado我可以得到X1，Y1和X2，Y2，不是X，Y，寬度，喚起注意？ –

@rafatmansour x2只是'x1 + width'，y2是'y1 + height'。另外，看看'getBoundingClientRect（）'：https：//developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect –

@Gerado，但如果我假設它將繪製水平，沒有旋轉，但我需要準確的x2，y2，它指定了終點 –

獲取SVG路徑的邊界框

回答

相關問題