Question

我有一张SVG地图，我将用它创建一个区域地图。当我在我的HTML页面中嵌入SVG文件时，它很有效，但是当我通过

包含它时却没有

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

你这是不对的......

你需要使用＆＃34; live＆＃34;绑定，因为当你直接包含它时加载与脚本不同的时间：
    $('#Layer_2').live('click', function() {
        alert('Thanks');
    });

我找到了这个解决方案first for read，second for read
要访问svg.contentDocument，必须从同一个域加载，否则它将为null 有效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元素：

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

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

1 个答案: