javascript - 单击 SVG 后如何与另一个 SVG 交互

Question

在我的代码中，我有一个美国的 SVG。 USA SVG 具有适用于美国每个州的路径。一旦单击特定的美国州，该路径的 ID 就会与位于名为“counties”的单独文件夹中的另一个 SVG(放大的​​州 SVG)相匹配。美国 SVG 淡出，放大的州 SVG 淡入。那么，我如何与这个新显示的放大的州 SVG 交互呢？

下面是我的代码，它在单击美国 SVG 上的特定路径后获取放大的州 SVG:

  <object style="width:auto; height:auto;" id="countyLevel" data="" type="image/svg+xml"></object>

和 Jquery:

$(document).ready(function(){
 $('path').on("click",function(e){
   var state = "counties/"+$(this).attr('id') + ".svg";
     showState(state);
    });  
 }); 

function showState(stateFile) {
    $('.usa').fadeOut();
    $('.returncountry').fadeIn();
    $('.table2').fadeIn();
    $("#countyLevel").attr("data", stateFile);  
    $("#countyLevel").css('display', 'block');
  }

美国 SVG 上的路径是交互式的，但我不知道如何使新的放大的州 SVG 路径在淡入后具有交互性。

Answer 1

您可以访问 <object> 中文档的 DOM标记为 .contentDocument一旦加载。从那里您可以像在任何其他文档中一样选择节点:

$(document).ready(function(){
    $('path').on("click",function(e){
    var state = "counties/"+$(this).attr('id') + ".svg";
        showState(state);
    });  
    // queue up the load event once
    $("#countyLevel").on("load", function () {
        // choose adequate selectors and events
        $(this.contentDocument).find('path').on("click", showAlert);
    });
});

// showState as above
// showAlert defines your interaction