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

【问题标题】：SVG is not being rendered as expected in firefox & ieSVG 在 Firefox 中未按预期呈现，即
【发布时间】：2021-12-21 21:10:03
【问题描述】：

顶部矩形框下方的“与门”在 Firefox 和资源管理器中未正确呈现。它正在在 chrome 中正确呈现。

当你在 Firefox 的图片中，半圈下的左侧看起来像 1px。

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

为什么不同浏览器之间会有这种差异？是否与我的代码有关？
对于跨浏览器和预期视图的 AND Gate，我可以做什么？

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

【问题讨论】：

标签： google-chrome svg internet-explorer firefox rendering

【解决方案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>

【讨论】：