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

Question

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

我有两个用例:

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

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

水平线穿过。这似乎在代码片段编辑器中对我不起作用，但这在我的网页上显示了一行。也许我遗漏了什么:

<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>