SVG is accessible when embedded but not when included

Question

I have a map with SVG and I am going to create an Area Map with that. It works well when I embed that SVG file in my HTML page, but not when I include it by

This is my SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<g id="Layer_1">
    <rect x="106.429" y="86.429" fill="#D32A2A" stroke="#000000" stroke-miterlimit="10" width="311.429" height="194.286"/>
</g>
<g id="Layer_2">
    <rect x="127.144" y="261.143" fill="#1F5785" stroke="#000000" stroke-miterlimit="10" width="311.428" height="194.287"/>
</g>
</svg>

And this is my javascript:

$(function(){
      $('#Layer_2').click(function() {
            alert('Thanks');
        });
    });

This works well and when I click on blue square, an alert shows. DEMO

But I need to include it like this:

<object data="map.svg" type="image/svg+xml" id="map-id" width="100%" height="100%"></object>

and when I include it, I don't have access to that. DEMO

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

You right this don't work...

You need for use "live" bind, because when you include it directly it load in not same time as your script:
    $('#Layer_2').live('click', function() {
        alert('Thanks');
    });

I have found this solutions first for read, second for read
To access svg.contentDocument it must be loaded from the same domain, and it will be null otherwise.
There working DEMO.

for simlify your use svg as inside you must start your code after loading all svg objects:

<object id="mysvg1" data="./test.svg" type="image/svg+xml"  width="100%" height="100%"></object>
<object id="mysvg2" data="./test.svg" type="image/svg+xml" width="100%" height="100%"></object>
...
var my_start_function = function(){
  // start your code here
}
...
var svg_objects = ['mysvg1','mysvg2'], load_counter = 0;
for (var i in svg_objects) {
   document.getElementById(svg_objects[i]).addEventListener("load",function() {
    load_counter++;
    if (load_counter == svg_objects.length) my_start_function();
  }, false);
}

and access to svg elements throught a little function:

var svg_inside = function(svg_id,elem_id) { 
    return $($(document.getElementById(svg_id.substr(1)).contentDocument).find(elem_id)[0]);
}
...
svg_inside('#mysvg1','#Layer_2').click(function() {
    alert('Thanks');
});

edited May 23 '17 at 12:20

Community

1
1

answered Feb 12 '15 at 07:16

imbearr

999
7
22

that is not my source and I know that, But I need that way that my code is, and you didn't use live. Thanks anyway – LASH Feb 12 '15 at 09:34
I a little don't understand you. What way you need? What about this? ` $(function(){ var my_start_function = function(svg) { var my_svg_elem = $(svg).find('#Layer_2')[0]; $(my_svg_elem).click(function() { alert('Thanks'); }); } var mySVG = document.getElementById("map-id"); mySVG.addEventListener("load",function() { my_start_function(mySVG.contentDocument); }, false); });` – imbearr Feb 12 '15 at 09:53
Please look at your answer, You used `live` but on your demo you didn't use that way. Please read my question again, I need the way what is in my code – LASH Feb 12 '15 at 10:08
I think that I have understand you. But there no any different way. And no way for using live and jquery both. – imbearr Feb 12 '15 at 10:11
I need to do it just by jquery and having direct access to SVG path by call it like `$("#path")` I can do it when embedded but I need to do it when I use it with object – LASH Feb 12 '15 at 10:14
Can you please change your demo? – LASH Feb 12 '15 at 10:42

SVG is accessible when embedded but not when included

1 Answers1