为什么SVG preserveAspectRatio不起作用? RSVG-转换

时间:2016-03-13 03:40:24

标签: svg transform scaling viewbox rsvg

我正在使用SVG图形为我正在处理的应用创建图像。作为一个例子,我将使用我最简单的图像之一。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="100%" height="100%" viewBox="0 0 270 50" 
    preserveAspectRatio="xMaxYMax meet">
    <path d="M 25 0 l 220 0 a 25 25 0 0 1 0 50 l -220 0 a 25 25 0 0 1 0 -50"
        stroke="none" fill="blue"/>
    <text text-anchor="middle" x="50%" y="35" font-size="30" fill="white"
        font-family="Montserrat">Login</text>
</svg>

当我完成这些图像时,我使用rsvg-convert来创建iOS应用程序所需的必要大小的图像。因此,为了生成1x,2x和3x尺寸,我运行

rsvg-convert -w 500 login.svg > login-1x.png
rsvg-convert -w 1000 login.svg > login-2x.png
rsvg-convert -w 1500 login.svg > login-3x.png

我被认为设置preserveAspectRatio="xMaxYMax meet"会导致我的viewBox扩展到我的视口大小。但是当我实现这个时,我得到以下结果。

登录-1x.png

login-1x.png

登录-2x.png

login-2x.png

登录-3x.png

login-3x.png

你可以看到根本没有缩放。事实上,如果我添加

<rect width="100%" height="100%" x="0" y="0" fill="none" stroke="white"/>

要查看100%x 100%矩形的轮廓,我明白了。

100%100%轮廓

white outline showing

所以对我来说很明显,由于某些原因,rsvg-convert以某种方式将100%解释为viewBox的100%而不是视口。 我做错了什么?

0 个答案:

没有答案