SVG显示不同的Chrome和Firefox(SVG being displayed differe

2019-09-30 09:07发布

我有一个SVG,但它看起来不同的Chrome和Firefox: http://codepen.io/anon/pen/OParwx 。

 svg { fill: black; stroke: black; width: 40px; height: 40px; } 
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48.266,51.827"> <g> <path d="M16.69 41.827c-2.763 0-4.975 2.237-4.975 5s2.212 5 4.975 5c2.763 0 5-2.237 5-5s-2.237-5-5-5"/> <path d="M40.19 41.827c-2.763 0-4.975 2.237-4.975 5s2.212 5 4.975 5c2.763 0 5-2.237 5-5s-2.237-5-5-5"/> <path d="M26.768 20v-20 20z" stroke-width="5" stroke-miterlimit="10" fill="none"/> <path d="M36.768 10h-20 20z" stroke-width="5" stroke-miterlimit="10" fill="none"/> </g> <g> <path d="M0 5.059h6.406l10.99 22.455h20.469l10.401-18.777" stroke-width="5" stroke-miterlimit="10" fill="none"/> <path d="M45 37.689h-29.947s-3.594.077-2.579-4.036l4.923-6.139" stroke-width="5" stroke-miterlimit="10" fill="none"/> </g> </svg> 

下面是他们看起来怎么样

火狐

是什么让他们不同,如​​何解决呢?

编辑:一个临时解决方案(除了等待被固定在Firefox 37的bug)是除去行程miterLimit分别和添加行程linejoin =“斜角”

Answer 1:

你患的bug 854296这将被固定在Firefox 37,时间不长,现在去一个仅适用于Windows的错误。



文章来源: SVG being displayed differently on Chrome and Firefox