如何在FireFox中檢測svg路徑的實際大小？

我試圖讓真正的「路徑」的大小，使用的是getBoundingClientRect功能，但在Firefox我得到不同的結果如何在FireFox中檢測svg路徑的實際大小？

在谷歌瀏覽器一切都很好：

1. 100px x 100px 
2. 100px x 100px

，但在Firefox：

1. 104px x 104px 
2. 100px x 100px

爲什麼stroke-width="1"增加了4px？如何在FF中沒有空格的情況下獲得實際大小？

<div>With stroke-width="1"</div> 
 
<svg width="110" height="110"> 
 
    <path stroke-width="1" d="M0 0 L 100 0 L100 100 L 0 100 Z" fill="black" stroke="black"></path> 
 
</svg> 
 
<br> 
 
<br> 
 
<div>With stroke-width="0"</div> 
 
<svg width="110" height="110"> 
 
    <path stroke-width="0" d="M0 0 L 100 0 L100 100 L 0 100 Z" fill="black" stroke="black"></path> 
 
</svg>

附：我triyng添加「行與文本」到這個路徑。我用getBoundingClientRect函數獲得路徑位置+大小，在這些座標中創建新的div。

結果：

來源

2016-11-11 MixerOID

Chrome是錯的，你的路徑是不是100×100的行程，從每一個邊緣伸出2個像素使得它104×104。 –

@RobertLongson我triyng添加「行文本」這個路徑。我用'getBoundingClientRect'函數獲取路徑位置+大小，在這個座標中創建新的div。結果：http://s1.micp.ru/i6QC3.png – MixerOID

你的問題是你正在創建一個104像素寬/高的路徑，然後用容器

我爲FF的解決方案。很簡單，但它的作品。

last_current.attr('stroke-width',0); // FireFox fix! 
let c_pos = last_current[0].getBoundingClientRect(); 
last_current.attr('stroke-width', 1); // FireFox fix!

來源

2016-11-14 13:45:20 MixerOID

如何在FireFox中檢測svg路徑的實際大小？

回答

相關問題