Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change height and width of SVG object using JavaScript

Tags:

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";         } 
like image 523
akm Avatar asked Oct 15 '14 21:10

akm


People also ask

How change SVG width and height?

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.

Does SVG have width and height?

SVG's exported from Illustrator CC are 'responsive' by default, in other words there is no height or width attributes, no dimensions.


1 Answers

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.

like image 72
Robert Longson Avatar answered Sep 20 '22 13:09

Robert Longson