Question

SVG是否支持百分比宽度？我已经尝试将宽度设置为100％并且它不会改变。如果没有，我可以做些什么来确保水平线一直延伸到一个元素？

我有两个用例：

SVG水平线从左侧开始20px并延伸100％到父div的边缘。 div是灵活的，因此它的大小会发生变化。因此，线必须增长或缩小才能看起来正确。
SVG垂直线从y 0开始并拉伸其所在容器的高度。容器高度灵活，可能会增大或缩小。

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

<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悬停在行动中：

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

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

1 个答案: