Question

在我的代码中，我有美国的SVG。美国SVG遍及美国每个州。单击一个特定的美国州后，该路径的ID将与另一个SVG（扩大的州SVG）匹配，该SVG位于名为“县”的单独文件夹中。美国SVG逐渐消失，放大后的状态SVG逐渐消失。那么，我如何与这个新显示的放大后的状态SVG互动？

这是我的代码，它在单击美国SVG上的特定路径后获取了扩大的State 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>通过.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

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

1 个答案: