Как сделать элементы изображения SVG кликабельными для отображения всплывающего окна в angular?

Question

Вот мой код =. Я много пробовал. В этом разделе показано изображение SVG, в котором будет загружен раздел контейнера. admin.component. html (содержит изображение SVG)

<div class = "container" style="text-align: center; position: relative; left: 0; top: 0;">
    <img class="center1" type="image/svg+xml" src="assets/1.jpg" width="500px"/>  
    <img class="center2" type="image/svg+xml" src="assets/preserve.svg" width="500px"/>  
<div>
<router-outlet></router-outlet>

popup.component. html (модальное всплывающее окно)

<div class="modal fade" id="popup" tabindex="-1" role="dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
                    Hello
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

app.component.ts (Здесь я вызываю функцию через модальный идентификатор '.)

ngOnInit(){
    $("g").click(function(){                                 
        $("#popup").modal("show");
    });
}

Answer 1

я предполагаю, что у вас на самом деле нет шаблона svg в вашем admin.component.html, jquery не удалось найти тег 'g', используемый внутри svg.

Предложение

• добавить обработчик события щелчка на img, содержащий svg ( Рекомендуется )

ngOnInit(){
    $('.center2').click(function(){                                 
        $("#popup").modal("show");
    });
}

• Если вам абсолютно необходимо добавить обработчик событий для тега g. Затем добавьте шаблон svg вместо тега img, содержащего svg. Просто откройте ваш svg в любом текстовом редакторе и скопируйте код. Это будет выглядеть примерно так:

<div class = "container" style="text-align: center; position: relative; left: 0; top: 0;">
    <img class="center1" type="image/svg+xml" src="assets/1.jpg" width="500px"/>  
    <svg class="center2" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <g fill="white" stroke="green" stroke-width="5">
          <circle cx="40" cy="40" r="25" />
          <circle cx="60" cy="60" r="25" />
        </g>
    </svg>
<div>
<router-outlet></router-outlet>