Установить полилинию с относительными точками, используя документ SVG

Question

Использование flex У меня есть два смежных div (s), где первый контейнер будет динамически устанавливать высоту на основе содержимого, а последний будет следовать за 100% его высоты.

В последнем div документ SVG на полную высоту рисует polyline.Однако, несмотря на изменение размера документа SVG, точка полилинии фиксируется в абсолютных значениях, поэтому не реагирует.

При нормальной ширине:

После сокращения ширины:

предполагаемый результат должен масштабироваться:

Можно ли каким-то образом установить точки относительно размера документа SVG, или, возможно, задать какую-то точку от оси 0,0, а остальное снизу?

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

Answer 1

Одним из решений является изменение вашего preserveAspectRatio на none, но это также приведет к растяжению штриха.

preserveAspectRatio="none"

обновленная скрипта: https://jsfiddle.net/majnhguz/

Обновление: вы можете решить это с помощьюиспользуя это на вашем пути:

vector-effect="non-scaling-stroke"

обновленная скрипта: https://jsfiddle.net/rv9kup7z/