增加SVG矩形的宽度

Question

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

用例：像下面的示例中一样，有不同的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，我发现可以增加所有width，svg->width和svg->viewBox->width属性的rect->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>

这会出错吗？有更好的方法吗？

Answer 1

SVG在填充您给它的盒子时很棒。只需创建具有所需宽度和高度样式的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>