Question

我的页面中有一个svg强制其容器的高度。它会移动其他元素......是否有可能改变svg的高度？现在svg元素是一个正方形，矩形会更好，因为高度太大了。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" enable-background="new 0 0 30 30" xml:space="preserve" width="50%" height="11%">
    <path fill="none" stroke="white" stroke-miterlimit="10" d="M19.7,7.6C15.3,4,9.1,4.1,5.3,7.7c-3.2,3-4,8-2.1,12
    c2.1,4.4,7.1,6.6,11.3,5.7c2.6-0.5,4.3-2.1,5.1-2.9"/>
    <line fill="none" stroke="white" stroke-width="1.1572" stroke-miterlimit="10" x1="19.3" y1="7.3" x2="10.8" y2="15.5"/>
    <line fill="none" stroke="white" stroke-width="1.3426" stroke-miterlimit="10" x1="10.9" y1="14.8" x2="19.7" y2="23.2"/>
    <line fill="none" stroke="none" stroke-width="1.1322" stroke-miterlimit="10" x1="14.7" y1="15.4" x2="23.5" y2="7.1"/>
    <line fill="none" stroke="none" stroke-width="0.9577" stroke-miterlimit="10" x1="14.9" y1="14.9" x2="22.7" y2="22.6"/>
    <path fill="none" stroke="none" stroke-width="1.0915" stroke-miterlimit="10" d="M22.9,7.2c0.3,0.1,0.6,0.4,1,0.7
    c1.8,1.4,3.9,4.2,3.4,7.9c-0.4,3-2.4,5.6-5.2,6.7"/>

    <text x="20" y="18" fill="White" class="textsvg" font-size="10">MENU</text>
</svg>

[的jsfiddle] [1]

谢谢！

Answer 1

查看此更新的jsFiddle：https://jsfiddle.net/qqzox761/1/

我从您的svg中删除了width和height并稍微更改了viewBox。

现在使用此svg代码，您可以在css中设置大小。

Answer 2

更改viewbox属性，此处：

<svg ... viewBox="0 0 60 60" ...

这意味着它是一个方形SVG，从0,0开始，每边的大小为60。更改此选项只会影响SVG视图的宽高比，您可以使用CSS以像素或百分比更精确地指定其宽度。

Answer 3

如mwl所述，您需要从<svg>删除宽度和高度。您用于创建图形的程序会自动将数据添加到viewbox，因此当mwl对其进行修改时，您在保存文件时看起来有额外的空白区域。我还重新创建了你的小提琴here但没有白色空间。关于SVG需要记住的重要一点是它完全是关于缩放的，这部分意味着保留纵横比比像素尺寸更重要。如果你想了解更多信息，那么Amelia Bellany-Royds对CSS-Tricks的评价很高article。

改变svg高度

3 个答案: