Resize SVG to 100% width but keep circles radius, how to do that?

3
votes

We use SVG to draw line graphs:

enter image description here

By design, the width should be 100%, so its exact value is unknown when SVG is generated. preserveAspectRatio="none" makes SVG to fill the 100% width, but it distortes the circles.

We save lines from distortion using vector-effect="non-scaling-stroke" option; is there some trick to keep circles radius the same when scaling SVG?

1
csssvg
Can you give a coded example instead of just images? – Randy
The sample is here - codepen.io/jury-gerasimov/pen/XqXpBz – Jury

1 Answers

4
votes

The solution is to replace circle with line of zero length but round caps. So each "circle" will look like -

<line x1="x" y1="y" x2="x" y2="y" 
style="stroke:#00a7e1;stroke-linecap:round;stroke-width:13px;vector-effect:non-scaling-stroke" />