Как взаимодействовать с другим SVG после нажатия SVG

Question

В моем коде у меня есть SVG из США. У США SVG есть пути для каждого штата США. Как только вы нажимаете на конкретный штат США, идентификатор этого пути совпадает с другим 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

Вы можете получить доступ к DOM документа в теге <object> с помощью .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