使用SVG文档

Question

我使用flex有两个相邻的div，第一个容器将根据内容动态设置高度，而后者将遵循其高度的100％。

在后一个div中，全高度的SVG文档绘制了polyline。但是，尽管SVG文档调整了其高度，但折线点的绝对值是固定的，因此没有响应。

正常宽度：

宽度缩小后

预期结果应按比例缩放：

是否可以相对于SVG文档大小设置点，或者可以从0,0轴设置某个点，而从底部设置其他点？

JsFiddle： https://jsfiddle.net/khaled_nabil/jov9cstg/4/

Answer 1

一种解决方案是将您的prepareAspectRatio更改为none，但这也会使笔触变长。

preserveAspectRatio="none"

更新的小提琴：https://jsfiddle.net/majnhguz/

更新： 您可以通过在路径上使用以下代码来解决该问题：

vector-effect="non-scaling-stroke"

更新的小提琴：https://jsfiddle.net/rv9kup7z/