如何使 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>

如何使 SVG 正确缩放？

How to make SVG scaling correctly?

scaling

svg