Question

今天，我已经开始学习SVG并在HTML中使用它。

所以，我在SVG中创建了一个文件，如下所示：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewbox="0 0 400 200">
    <path d = "M0,100 L100,100 L125,50 L175,150 L225,50 L275,150 L300,100 L400,100"
            style="
                stroke: #000000;
                stroke-width: 5;
                fill: none;
                " 
    />
</svg>

然后我尝试在html中使用它作为图像：

<!DOCTYPE html>
<html>
    <head>
        .....
    </head>
    <body>

        <div class="menu">
            <ul>
                <li class="menu-item"><a href="#"><img src="svg/mysvg.svg" height="48" width="48"></img></a></li>
                <li ...... />
                <li ...... />
                <li ...... />
            </ul>
        </div> 

    </body>
</html>

但是我看不到svg没有调整大小。我的错是什么？有人能指出我正确的方向吗？

Answer 1

The problem is that viewBox has been written with a lower-case b. As a result, this parameter is not recognized by the browser. In an SVG without a viewBox attribute, all lengths are assumed to be in pixels, so resizing the SVG will have no effect.

If you change viewbox to viewBox, the SVG will scale so that the view box area matches the dimensions of the SVG (in much the same way as an ordinary embedded image).

如何在html中调整img标签中使用的svg？

1 个答案: