设置折线使用SVG文件的相对点

Question

使用flex我有两个相邻div（S），其中，所述第一容器将动态地设置基于内容的高度，而后者将遵循是其高度的100％。

在后者div，在全高度的SVG文件绘制polyline。然而，尽管在SVG文档大小调整它的高度，折线点是固定的绝对值，因此不响应。

在正常宽度：

一旦宽度收缩：

预期的结果应该规模：

将它在某种程度上是可以设置相对于SVG文件的大小，或者设置一些点从0,0轴，并从底部休息点？

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

Answer 1

一个解决办法是改变你的preserveAspectRatio到无，但将拉伸行程为好。

preserveAspectRatio="none"

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

更新：您可以通过解决通过使用此您的路径上：

vector-effect="non-scaling-stroke"

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