如何正确地进行SVG缩放?

时间:2018-01-09 18:04:50

标签: svg scaling

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

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

然而,事实并非如此:

result

同样放大它:

result zoomed

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

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

谢谢。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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