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