SVG 在 Chrome 和 Firefox 上的显示方式不同

Question

我有一个 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>

这是他们的样子

Chrome

火狐

它们有何不同以及如何解决？

编辑：一个临时解决方案（除了等待 Firefox 37 修复错误）是删除 stroke-miterlimit 并添加 stroke-linejoin="bevel"

Answer 1

您正在遭受 bug 854296 这是一个 Windows 唯一的错误，将在 Firefox 37 中修复，所以现在很快就会修复。

SVG 在 Chrome 和 Firefox 上的显示方式不同

SVG being displayed differently on Chrome and Firefox

svg

cross-browser

difference