有没有办法将 SVG 元素的宽度设置为 100%？

Question

SVG 是否支持百分比宽度？我尝试将宽度设置为 100%，但它没有改变。如果没有，我能做些什么来确保一条水平线一直延伸到一个元素上吗？

我有两个用例：

1. SVG 水平线从左侧 20px 开始，并延伸 100% 到父 div 的边缘。 div 很灵活，因此它的大小会发生变化。所以线条必须扩大或缩小才能看起来正确。

2. SVG 垂直线从 y 0 开始并拉伸其所在容器的高度。容器高度是灵活的，可以增长或缩小。

横穿的横线。这在我这里的代码 sn-p 编辑器中似乎不起作用，但这在我的网页上显示了一行。也许我错过了一些东西：

<div style="position:absolute;top:100px;left:100px;width:150px;height:150px;border:1px dashed blue">
  <svg>
    <line x1="0" x2="100" y1="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:1;"></line>
  </svg>
</div>

Answer 1

这很好用，将鼠标悬停在div 以查看实际情况：

div {
  border:1px solid;
  background:#f8f8f8;
  width:25vw;
  height:25vh;
  transition:all 0.3s;
}
div:hover {
  width:75vw;
  height:75vh;
}
svg {
  width:100%;
  height:100%;
}

<div>
  <svg viewbox="0 0 260 220">
    <polygon points="200,10 250,190 10,210" style="fill:lime;stroke:purple;stroke-width:1" />
  </svg>
</div>