将SVG调整为特定尺寸

时间:2013-12-10 23:06:05

标签: css html5 svg

我正在尝试将svg调整到我想要的确切大小(32x32)。 请查看http://jsfiddle.net/Uy94k/6/

上的示例

这个小提琴是一个较大的.svg文件的简短版本,我将其包含在我的html文件中并提交给我想要使用的图像:

<svg class="small" viewBox="0 0 512 512" preserveAspectRatio="none">
    <g filter="">
        <use xlink:href="#login"></use>
    </g>
</svg>

(顺便说一下,这样做更容易吗?)。

正如你所看到的,我尝试过使用preserveAspectRatio,但没有运气。我也尝试了不同的样式技术(例如,在svn外部的span标签中调整大小,在svn标签中设置样式,在id和我称之为高度的地方摆弄高度。)。

如果您使用开发人员工具查看小提琴中图像的高度/宽度,您会看到它是26x20 ..但为什么会这样?

1 个答案:

答案 0 :(得分:0)

调整viewBox值(在这种情况下猜测viewBox="120 70 340 340"的值)有点诀窍。但是它容易出错,不好看,并且调整参数很乏味。请查看http://jsfiddle.net/veZSX/1/的示例,了解一个tweeked vs untweeked版本。 必须有更好的方法吗?