SVG嵌入时可访问，但不包括时嵌入

Question

我有一个SVG地图，我将创建一个区域地图。它工作得很好，当我嵌入该SVG文件在我的HTML页面，而不是当我把它给由

这是我的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> 

这是我的javascript：

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

这效果很好，当我点击蓝色方块时，会显示一条警告。 DEMO

但我需要包括像这样：

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

，当我有它，我没有访问到。 DEMO

Answer 1

您的权利这不工作...

你需要使用“活”的绑定，因为当你包括它直接就 负载不同时为你的脚本：

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

我发现这个解决方案first for read，second for read
要访问svg.contentDocument它必须来自同一个域加载，它否则将为空。
在那里工作DEMO。

为simlify您使用SVG作为内必须加载所有SVG对象后启动代码：

<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); 
} 

，并获得SVG元素throught一个小功能：

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'); 
});