Question

我用svg创建了一个形状，但是当调整浏览器大小时它会被破坏。如果有人知道解决方案，请回答。

<svg width="1315" height="65" id="intro-weg" style="background: red"> 
    <g transform="matrix(1.25,0,0,-1.25,0,611.25)"> 
        <g transform="scale(0.1,0.1)"> 
            <path d="m 10520,4376 c -383.8,320.87 -877.97,514 -1417.32,514 0,0 526.42,-552.76 -2211.03,-552.76 L 0,4337.24 0,0 l 10520,0 0,4376" class="colorize"></path>
        </g> 
    </g> 
</svg>

Answer 1

您告诉浏览器，此SVG的行为与1315像素宽，65像素高的图像相同。相反，请考虑删除显式height和viewBox属性，使用{{1}}属性定义内部SVG图像的确切尺寸，并使用CSS将SVG图像放置在页面中。 / p>

XML似乎是在一个程序中创建的（而不是手工创建的），所以我首先要找一个＆＃34; View Box＆＃34;选项在程序的某个地方。如果您手动输入此SVG XML，请考虑阅读MDN's discussion of the viewBox attribute。

Answer 2

您可以按照以下步骤使SVG响应：

从svg元素中删除硬编码的width，height属性。
```
<svg id="intro-weg" style="background: red">
```
添加viewBox属性，指定所需的宽度和高度（与之前为svg指定的相同）分别为第3和第4个值：（more about viewBox）
```
<svg id="intro-weg" viewBox="0 0 1315 65" style="background: red">
```

在css中指定svg元素的宽度和高度：

svg#intro-weg{
   width: 100%;
   height: auto;
}

你的svg现在应该响应。

如何在浏览器调整大小时调整svg

2 个答案: