如何正确地进行 SVG 缩放？答案

【问题标题】：How to make SVG scaling correctly?如何正确地进行 SVG 缩放？
【发布时间】：2018-01-09 18:04:49
【问题描述】：

我有一个像这样的 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>

我希望不管它的大小，它只会包含纯蓝色或纯绿色。

然而，事实并非如此：

放大也一样：

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

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

谢谢。

【问题讨论】：

标签： svg scaling

【解决方案1】：

如果需要，您可以通过 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>

【讨论】：

【解决方案2】：

问题是抗锯齿。这是渲染器的特性，而不是您的 SVG 表示。没有真正的答案，也不应该是这样 - 一个像素是一个图像样本，而不是一个小正方形。

【讨论】：