Menu
I create a line with svg.but when I resize my browser the line created with svg not resized.
I try to set width the svg in percent but after doing that the line not appear. How I can set width of svg by percent??
<svg height="210" width="500"> <line x1="380" y1="20" x2="230" y2="200" style="stroke: rgb(234, 243, 234); stroke-width: 5"></line> </svg> 
453
Any height or width you set for the SVG with CSS will override the height and width attributes on the <svg> . So a rule like svg {width: 100%; height: auto;} will cancel out the dimensions and aspect ratio you set in the code, and give you the default height for inline SVG.
Nearly every length measurement in SVG can be expressed by a percentage. With a few exceptions, those percentages are relative to the SVG coordinate system size—the size defined by the viewBox of the nearest ancestor <svg> or <symbol> (or by its actual width and height, if it doesn't have a viewBox ).
Just set max-width: 100%; on your SVG and it should stay inside.
The reason why it is tricky to scale SVG is that it does not scale like the other image formats. SVG images have a clearly defined aspect ratio: the ratio of width to the height which makes it difficult to scale with the changing parent container.
I solved my problem. I change my code to this and this is working:
<svg style="width:100%;height:100%;"> <line x1="100%" y1="0%" x2="0%" y2="100%" style="stroke: rgb(234, 243, 234);stroke-width: 5;"></line> </svg> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With