CODEWITHSUNDEEP
jqueryhtmlsvg
Jayy
Jayy

Reputation: 14728

JQuery: Modify SVG element dimensions

I have an svg tag embedded in HTML. The following code does nothing:

var svg = $('svg');
svg.attr({
    width: "300px", 
    height: "300px"
});

In fact, I haven't been able to modify its size in CSS either. The only way I've managed is by setting width and height attributes in the html itself:

<svg 
    width="300px"
    height="300px"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events"
></svg>

How should I be changing the size of the SVG area? Do I need a JQuery SVG plugin for it? (Please provide example code).

Thanks

Upvotes: 0

Views: 111

Answers (1)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

I'd suggest posting an example of what you're doing on e.g jsfiddle.net.

Anyway, you don't really need jQuery to do this. Here's an example that uses CSS transitions to change the width and height properties of the inline svg fragment that is hovered by the mouse.

A guess is that if the changes don't affect your svg fragment, then you have some CSS that is overriding those changes.

Upvotes: 1

Related Questions