I want to change height and width of an svg object on a button click. I tried it but it doesn't work:
function modify() { document.getElementById('circle1').style.height = "10px"; document.getElementById('circle1').style.width = "10px"; }
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.
SVG's exported from Illustrator CC are 'responsive' by default, in other words there is no height or width attributes, no dimensions.
In SVG width and height of <rect>
elements are attributes and not CSS properties so you'd need to write
document.getElementById('cercle1').setAttribute("height", "10px");
similarly for the width.
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