How to make svg line responsive

Question

I have made this svg diagram http://jsfiddle.net/F3wPz/2/show/ and have tried expressing the shapes in it in percentages http://jsfiddle.net/F3wPz/2/

However,while the rectangles are respond to resize,the lines aren't.For instance,in this line

<line id="svg_3" y2="55" x2="447" y1="55" x1="168" stroke-width="5" stroke="#000000" fill="none"/>

i am hesitating to think that the start of line and end of line on the x and y axis can be expressed in percentages since they are th eonly ones not resizing on screen resize.Is it wrong to express the lines in %?.

Answer 1

Those x and y values are not pixel units, they're expressed in units that are relative to the SVG's coordinate system. If your SVG is sized using relative units (e.g., % or em) then the line should scale accordingly without you having to modify any line attributes. I think what you're missing for this to work is the viewBox attribute on your <svg> element.

Here's an example showing your SVG at 50% scale.

Relevant code section:

 <svg width="50%" height="50%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480">