SVG在嵌入时可访问，但在包含时不可访问

SVG is accessible when embedded but not when included

本文关键字：访问 包含时 SVG      更新时间：2023-10-05

我有一个带有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');
        });
    });

这很有效，当我点击蓝色方块时，会显示一个警报。演示

但我需要这样包括它：

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

当我包含它时，我无法访问它。演示

你说得对，这不起作用。。。

你需要使用"live"绑定，因为当你直接包含它时在与脚本不同时加载：

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

我找到了这些解决方案，第一个供阅读，第二个供阅读
要访问svg.contentDocument，它必须从同一域加载，否则它将为null
那里正在进行演示。

对于simlify，你必须在加载所有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');
});
相关文章：