增加SVG rect的宽度

Question

是否可以在保持height不变的同时增加<rect>的width ？

用例：有不同的svg形状包含如下示例中的文本。 根据输入，此文本可能会发生变化。 如果文本太长，我想增加宽度以匹配文本的宽度。

 <svg viewBox="0 0 300 100" width="300px" height="100px"> <rect x="0" y="0" width="300" height="100" stroke="red" stroke-width="3px" fill="white"/> <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Hello World</text> </svg>

在上面的例子中， <rect>的可见尺寸是 300x100 像素。 如果我想保持可见height并增加width ，我发现我可以增加所有svg->width 、 svg->viewBox->width和 rect-> rect->width属性的width值。

 <svg viewBox="0 0 400 100" width="400px" height="100px"> <rect x="0" y="0" width="400" height="100" stroke="red" stroke-width="3px" fill="white"/> <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Hello World</text> </svg>

这个 go 错了吗？ 有没有更好的办法？

Answer 1

SVG 在填充您给它的盒子时非常棒。 只需创建一个具有所需宽度和高度 styles 的 div 容器，然后将 svg 放入其中，设置为 100% 的宽度和高度。 并对每个图形元素做同样的事情。

请记住，使用此方法意味着您很可能需要调整 div 的填充以将 svg 放置在您需要的位置。

 <div style="width:600px; height:150px;"> <svg width="100%" height="100%"> <rect x="0" y="0" width="100%" height="100%" stroke="red" stroke-width="3px" fill="white"/> <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Hello World</text> </svg> </div> <br/> <div style="width:100px; height:25px;"> <svg width="100%" height="100%"> <rect x="0" y="0" width="100%" height="100%" stroke="red" stroke-width="3px" fill="white"/> <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Hello World</text> </svg> </div>