頂部矩形框下方的“AND 門”在 firefox 和 IE explorer中未正確呈現。它在 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>和門
uj5u.com熱心網友回復：
AND 門溢位 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/353874.html