CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Zubair Pyromaniac
Zubair Pyromaniac

Reputation: 69

Changing the properties of the <object> tag ONLY, which contains an SVG element using jQuery

I am working on an object element that contains an SVG image in it. I am aware that inorder to select the SVG inside it I have to do this: 

var svgObject = $('#SVG_Object')[0].contentDocument ; //Traverse in to the document

/*Now to select the item inside the SVG document*/
$('#SVG_Item',svgObject).css({'fill':'lime'}) ;//select the item and change its color

We all know that, we cannot select the SVG directly, we have to go through the above mentioned steps inorder to do some changes to the SVG. Now, heres the question, Is there way to select ONLY the Object tag as a whole and do changes to the object tag as a Whole ? The problem is specifically about positioning. I have this scenario going on: 

<!--HTML--> <object data="img/image.svg" id="SVGObject"><object>

/*CSS*/ #SVGObject{position: relative; left: 123px ; top: 123px ;}

/*Javascript*/ $('#SVGbject').animate({'left':523},600,'linear');

You see from the above code, I want to animate ONLY the positioning of object tag instead of animating the SVG itself. Ofcourse, the code does not work, however, Is there way to do it ? I would really appreciate your responses. Please forgive me if the description is not enough do let me know if you require any further information regarding this scenario. Thanks for your HElP !!

Upvotes: 0

Views: 174

Answers (1)

rfornal
rfornal

Reputation: 5122

Your jQuery code has an error ... otherwise, it's correct; you can animate the object ...

Change ...

$('#SVGbject').animate({'left':523},600,'linear');

... to ...

$('#SVGObject').animate({'left':523},600,'linear');

With the correct reference, it works: http://jsfiddle.net/rfornal/uopzupn7/

Added a Plunk for better handling of external SVG file per documentation below.

http://plnkr.co/edit/tQiscH?p=preview

Upvotes: 1

Related Questions