SVG 未按预期在 Firefox 中呈现，即

Question

顶部矩形框正下方的“与门”在 firefox 和 ie explorer 中无法正确呈现。它 在 chrome 中正确呈现。

就像你在firefox上的图片一样，半圆下的左边好像是1px。

我的形状厚度是 2px。我已经决定 2px 以避免在 1px 的情况下出现渲染问题。

为什么不同浏览器之间会有这种差异？跟我的代码有关吗？
我可以为跨浏览器和预期视图的与门做什么？

svg 中的与门代码是：

<g transform="translate(216.5, 136)">
    <svg width="39" height="48" viewBox="0 0 52 64">
        <path d="M 0 26 A 26 26 0 0 1 52 26 v 38 h -52 v -38 z" fill="#000000" />
        <path d="M 2 26 A 24 24 0 0 1 50 26 v 36 h -48 v -36 z" fill="#ffffff" />
    </svg>
</g>

谢谢。

<!DOCTYPE html>
<html>
  <body>
    <svg version="1.1" width="472" height="442" viewBox="0 0 472 442" xmlns="http://www.w3.org/2000/svg">
      <rect x="0" y="0" width="472" height="442" fill="#dddddd" />
      <rect x="136" y="16" width="200" height="120" fill="#000000" />
      <rect x="138" y="18" width="196" height="116" fill="#ffffff" />
      <g transform="translate(216.5, 136)">
        <svg width="39" height="48" viewBox="0 0 52 64">
          <path d="M 0 26 A 26 26 0 0 1 52 26 v 38 h -52 v -38 z" fill="#000000" />
          <path d="M 2 26 A 24 24 0 0 1 50 26 v 36 h -48 v -36 z" fill="#ffffff" />
        </svg>
      </g>
      <rect x="235" y="184" width="2" height="24" fill="#000000" />
      <rect x="115" y="210" width="2" height="24" fill="#000000" />
      <rect x="355" y="210" width="2" height="24" fill="#000000" />
      <rect x="116" y="208" width="240" height="2" fill="#000000" />
      <rect x="16" y="234" width="200" height="120" fill="#000000" />
      <rect x="18" y="236" width="196" height="116" fill="#ffffff" />
      <g transform="translate(92, 354)">
        <svg width="48" height="48" viewBox="0 0 52 52">
          <circle cx="26" cy="26" r="26" fill="#000000" />
          <circle cx="26" cy="26" r="24" fill="#ffffff" />
        </svg>
      </g>
      <rect x="256" y="234" width="200" height="120" fill="#000000" />
      <rect x="258" y="236" width="196" height="116" fill="#ffffff" />
      <g transform="translate(332, 354)">
        <svg width="48" height="48" viewBox="0 0 52 52">
          <circle cx="26" cy="26" r="26" fill="#000000" />
          <circle cx="26" cy="26" r="24" fill="#ffffff" />
        </svg>
      </g>
    </svg>
  </body>
</html>

and gate

Answer 1

与门溢出 viewBox。所以我们只需要让它更宽一些。

<!DOCTYPE html>
<html>
  <body>
    <svg version="1.1" width="472" height="442" viewBox="0 0 472 442" xmlns="http://www.w3.org/2000/svg">
      <rect x="0" y="0" width="472" height="442" fill="#dddddd" />
      <rect x="136" y="16" width="200" height="120" fill="#000000" />
      <rect x="138" y="18" width="196" height="116" fill="#ffffff" />
      <g transform="translate(216.5, 136)">
        <svg width="39" height="48" viewBox="-1 0 53 64">
          <path d="M 0 26 A 26 26 0 0 1 52 26 v 38 h -52 v -38 z" fill="#000000" />
          <path d="M 2 26 A 24 24 0 0 1 50 26 v 36 h -48 v -36 z" fill="#ffffff" />
        </svg>
      </g>
      <rect x="235" y="184" width="2" height="24" fill="#000000" />
      <rect x="115" y="210" width="2" height="24" fill="#000000" />
      <rect x="355" y="210" width="2" height="24" fill="#000000" />
      <rect x="116" y="208" width="240" height="2" fill="#000000" />
      <rect x="16" y="234" width="200" height="120" fill="#000000" />
      <rect x="18" y="236" width="196" height="116" fill="#ffffff" />
      <g transform="translate(92, 354)">
        <svg width="48" height="48" viewBox="0 0 52 52">
          <circle cx="26" cy="26" r="26" fill="#000000" />
          <circle cx="26" cy="26" r="24" fill="#ffffff" />
        </svg>
      </g>
      <rect x="256" y="234" width="200" height="120" fill="#000000" />
      <rect x="258" y="236" width="196" height="116" fill="#ffffff" />
      <g transform="translate(332, 354)">
        <svg width="48" height="48" viewBox="0 0 52 52">
          <circle cx="26" cy="26" r="26" fill="#000000" />
          <circle cx="26" cy="26" r="24" fill="#ffffff" />
        </svg>
      </g>
    </svg>
  </body>
</html>

SVG 未按预期在 Firefox 中呈现，即

SVG is not being rendered as expected in firefox & ie

firefox

internet-explorer

svg

rendering

google-chrome