如何在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路径的实际大小？

回答

相关问题