如何正确地进行SVG缩放？

Question

我有一个这样的SVG：

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    id="demo" 
    style="bottom:0px;left:0px;right:0px;top:0px;margin:auto;position:absolute;" 
    viewBox="0 0 40 28">
    <rect x="0" y="0" width="40" height="14" fill="blue"/>
    <rect x="0" y="14" width="40" height="14" fill="green"/>
</svg>

我希望无论它的大小如何，它都只包含纯蓝色或纯绿色。

然而，事实并非如此：

同样放大它：

如您所见，蓝色和绿色矩形之间有这个半透明的白色边框。

它来自哪里？我可以避免吗？

谢谢。

Answer 1

问题在于抗锯齿。它是渲染器的特征，而不是您的SVG表示。没有真正的答案，并且没有意义 - 像素是图像样本，而不是一个小方块。

Answer 2

如果需要，可以通过shapeRendering关闭抗锯齿：crispEdges。如果将它应用于不仅仅由垂直或水平线组成的事物，您可能不喜欢该结果。

viewBox还强制形状保持纵横比，这可能导致边缘为空以保持纵横比。您可以再次通过preserveAspectRatio =“none”将其关闭，但您的形状将会扭曲以匹配容器纵横比。

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    id="demo" 
    style="bottom:0px;left:0px;right:0px;top:0px;margin:auto;position:absolute;shape-rendering:crispEdges" 
    viewBox="0 0 40 28" preserveAspectRatio="none">
    <rect x="0" y="0" width="40" height="14" fill="blue"/>
    <rect x="0" y="14" width="40" height="14" fill="green"/>
</svg>