SVG 在 Firefox 中未按预期呈现，即
Posted
技术标签:
【中文标题】SVG 在 Firefox 中未按预期呈现，即【英文标题】：SVG is not being rendered as expected in firefox & ie 【发布时间】：2021-12-21 21:10:03 【问题描述】：顶部矩形框下方的“与门”在 Firefox 和资源管理器中未正确呈现。它正在在 chrome 中正确呈现。
当你在 Firefox 的图片中，半圈下的左侧看起来像 1px。
我的形状厚度是 2px。我决定 2px 是为了避免在 1px 的情况下出现渲染问题。
-
为什么不同浏览器之间会有这种差异？是否与我的代码有关？
对于跨浏览器和预期视图的 AND Gate，我可以做什么？
svg中与门的代码是：
<g transform="translate(216.5, 136)">
<svg 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" viewBox="0 0 472 442" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" fill="#dddddd" />
<rect x="136" y="16" fill="#000000" />
<rect x="138" y="18" fill="#ffffff" />
<g transform="translate(216.5, 136)">
<svg 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" fill="#000000" />
<rect x="115" y="210" fill="#000000" />
<rect x="355" y="210" fill="#000000" />
<rect x="116" y="208" fill="#000000" />
<rect x="16" y="234" fill="#000000" />
<rect x="18" y="236" fill="#ffffff" />
<g transform="translate(92, 354)">
<svg 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" fill="#000000" />
<rect x="258" y="236" fill="#ffffff" />
<g transform="translate(332, 354)">
<svg 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
【问题讨论】：
【参考方案1】：与门溢出 viewBox。所以我们只需要让它更宽。
<!DOCTYPE html>
<html>
<body>
<svg version="1.1" viewBox="0 0 472 442" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" fill="#dddddd" />
<rect x="136" y="16" fill="#000000" />
<rect x="138" y="18" fill="#ffffff" />
<g transform="translate(216.5, 136)">
<svg 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" fill="#000000" />
<rect x="115" y="210" fill="#000000" />
<rect x="355" y="210" fill="#000000" />
<rect x="116" y="208" fill="#000000" />
<rect x="16" y="234" fill="#000000" />
<rect x="18" y="236" fill="#ffffff" />
<g transform="translate(92, 354)">
<svg 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" fill="#000000" />
<rect x="258" y="236" fill="#ffffff" />
<g transform="translate(332, 354)">
<svg 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 中未按预期呈现，即的主要内容，如果未能解决你的问题，请参考以下文章
Firebase onAuthStateChanged 在 React App 中未按预期运行