Javascript 根据容器的高度缩放线条

我正在制作一个svg（一个线条元素），它是垂直的。我希望svg行根据容器的高度进行缩放

<div class="parent">
    <svg viewBox="0 0 100 100">
       <line x1="0" y1="0" x2="0" y2="20" style="stroke: black;stroke-width:1"/>
    </svg>
</div>

现在，如果增加父宽度，垂直线比例的高度，但要求是，随着高度的增加，长度应该成比例增加。

---

我是否将

视图框

放错了？

我认为您正在寻找

矢量效果

属性。如果将其设置为

非缩放笔划

-这将使您能够将线条笔划保持为1像素，与svg的大小无关。看看下面的示例，我已经设置了svg来填充父对象：

.parent{
背景：#efef；
宽度：200px；
高度：200px；
}
svg{
宽度：100%；
身高：100%；
}

---

我认为您正在寻找

矢量效果

属性。如果将其设置为

非缩放笔划

-这将使您能够将线条笔划保持为1像素，与svg的大小无关。看看下面的示例，我已经设置了svg来填充父对象：

.parent{
背景：#efef；
宽度：200px；
高度：200px；
}
svg{
宽度：100%；
身高：100%；
}

---

按比例缩放SVG：

.parent{
背景：黄色；
}
.父svg{
身高：100%；
}

100px高度
300px高度

按比例缩放SVG：

.parent{
背景：黄色；
}
.父svg{
身高：100%；
}

100px高度
300px高度

真的很有帮助，谢谢！！但是我必须更新viewbox=0 100。真的很有帮助，谢谢！！但是我必须更新viewbox=0 100。当您增加高度笔划宽度时，当您增加高度笔划宽度时，笔划宽度增加