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

在我的代码中，我有一个美国的SVG。美国的SVG有美国每个州的路径。单击特定的美国州后，该路径的ID将与另一个SVG（放大的州SVG）匹配，该SVG位于名为“Countries”的单独文件夹中。美国SVG淡出，放大状态SVG淡入。那么，我如何与这个新显示的放大状态SVG交互呢

下面是我的代码，它在单击USA SVG上的特定路径后获取放大的状态SVG：

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

---

USA SVG上的路径是交互式的，但我不知道如何在新的放大状态SVG路径淡入时使其成为交互式的

加载文档后，您可以使用

.contentDocument

以

标记访问文档的DOM。从中，您可以像在任何其他文档中一样选择节点：

$(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

---

“交互”是一个相当宽泛的术语。你到底在想什么？@ccprog我只想在放大状态下点击一条路径，并发出警报。如果我能做到这一点，那么我就能解决所有其他问题！对不起，你是对的，我应该提到你必须等待装货。参见edit.so，我把它放在$（“#countyLevel”）.attr（“data”，stateFile）上面；我已经有了吗？我这样做了，这给了我一个错误“意外标记”）“我的示例没有可执行代码。交换

函数…

以获取定义交互的回调。我重写了示例，以演示如何将

加载

事件处理程序附加一次，以便每次交换县地图时，都会重新激活内部的

单击

事件。

$(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