I have the following js script to access elements inside a object (SVG - <object data="bbbbbb.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>
)
jQuery(document).ready(function($) {
$(window).load(function () {
var a = document.getElementById("alphasvg");
var svgDoc = a.contentDocument;
var delta = svgDoc.getElementsByTagName("path");
$(delta).click(function() {
//do stuff
})
});
});
I want to use jQuery to access the elements and tags. I'm completely stuck on the contentDocument part. How can I convert this to jQuery so I can use attr etc?
I want to be able to access and modify attributes in jQuery instead of having to use the traditional js methods which I am unfamiliar with.
How someone can help me?
Thanks a million.
I have the following js script to access elements inside a object (SVG - <object data="bbbbbb.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>
)
jQuery(document).ready(function($) {
$(window).load(function () {
var a = document.getElementById("alphasvg");
var svgDoc = a.contentDocument;
var delta = svgDoc.getElementsByTagName("path");
$(delta).click(function() {
//do stuff
})
});
});
I want to use jQuery to access the elements and tags. I'm completely stuck on the contentDocument part. How can I convert this to jQuery so I can use attr etc?
I want to be able to access and modify attributes in jQuery instead of having to use the traditional js methods which I am unfamiliar with.
How someone can help me?
Thanks a million.
Share Improve this question edited Sep 17, 2016 at 20:35 ppeterka 20.7k6 gold badges66 silver badges79 bronze badges asked May 13, 2011 at 10:07 user752135user752135 711 gold badge1 silver badge2 bronze badges 1- are you trying to access in-line frame values? – Piotr Kula Commented May 13, 2011 at 10:43
3 Answers
Reset to default 5You should be able to access the paths directly like elements, no need for contentDocument or getElementsByTagName, etc:
jQuery(document).ready(function($) {
$(window).load(function () {
$("#alphasvg path").click(function() {
//do stuff
// $(this).attr('d') = the path
})
});
});
Like this:
$(svgDoc).find("whatever").doWhatever();
Demo here and code here. Note that I've used an <iframe> for demonstration hence the first URL will work, second will give you "permission denied" error if you try to run the fiddle.
If you are embedding SVG into HTML using the object tag (as opposed to inline SVG), this then this is a duplicate of a previous question, the answer to which may be found here: How to access SVG elements with Javascript