Как открыть модальное окно, нажав на элемент SVG

Question

У меня есть сложный SVG, который является планом этажа здания. Я хотел бы создать модальные окна или всплывающие окна, которые предоставляют небольшое описание разных комнат в здании.

Вопрос: как добавить форматирующий модальный (или другое всплывающее окно) при щелчке или в SVG? Я попытался добавить модальный код в тег, но это, похоже, не работает.

 <rect data-toggle="modal" data-target="#section-h-modal" id="section-h" x="112.6" y="31.4" class="mapsvg-region" width="35.2" height="69.3" style="vector-effect: non-scaling-stroke; fill: rgb(0, 125, 186);"> 
<foreignobject class="node" x="46" y="22" width="100" height="100"> 
<div id="section-h-modal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">x</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 
</foreignobject> 

Answer 1

Вы использовали неправильный тег для запуска модального узнать больше о foreignObject Click Here и ваше решение here

<svg> 
<g> 
    <a xlink:href="#" class="btn-cta" > 
    <rect data-toggle="modal" data-target="#section-h-modal" id="section-h" 
    x="112.6" y="31.4" class="mapsvg-region" width="35.2" height="69.3" 
    style="vector-effect: non-scaling-stroke; fill: rgb(0, 125, 186);" > 
    </rect> 
    </a> 
</g> 
</svg> 
<div class="overlay"> 
<div class="modal"> 
<!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button class="close-btn">x</button> 
     <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
     <p>Some text in the modal.</p> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data- 
     dismiss="modal">Close</button> 
    </div> 
    </div> 
</div> 
</div> 

CSS

.btn-cta { 
    width: 120px; 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
    text-transform: uppercase; 
    font-size: 20px; 
    padding: 10px; 
    background: #ccc; 
    color: #555; 
    text-decoration: none; 
    transition: all 0.2s ease-in-out; 
} 

.overlay { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background: rgba(0, 0, 0, 0.7); 
    display: flex; 
    margin-top: -10%; 
    justify-content: center; 
    align-items: center; 
    pointer-events: none; 
    opacity: 0; 
    transition: all 0.5s cubic-bezier(0.59, -0.17, 0.3, 1.67); 
} 

.overlay.is-open { 
    opacity: 1; 
    pointer-events: auto; 
} 

.modal { 
    transform: translate(0px, -50px); 
    transition: all 0.7s cubic-bezier(0.59, -0.17, 0.3, 1.67); 
    position: relative; 
    padding: 30px; 
    width: 400px; 
    background-color: #ddd; 
    color: #231D23; 
    text-align: center; 
    overflow: hidden; 
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.4); 
} 

.modal .close-btn { 
    position: absolute; 
    padding: 3px 9px; 
    font-size: 24px; 
    text-align: center; 
    background: #ccc; 
    color: #9c9c9c; 
    top: -1px; 
    right: 0; 
    cursor: pointer; 
    transition: all 0.3s ease-in-out; 
} 

JQuery

$(function() { 
$('.btn-cta').click(function() { 
    $('.overlay').addClass('is-open'); 
    return false; 
}); 

$('.close-btn').click(function() { 
    $('.overlay').removeClass('is-open'); 
}); 
}); 

Answer 2

В большинстве библиотек, например, начальной загрузки или материализуются, вы можете открыть модальные диалоговые окна с помощью кодов JavaScript. По этой причине, пожалуйста, прочитайте их примеры, чтобы узнать, как их открыть.

Чтобы разрешить события click на ваших элементах svg, вы должны знать, что каждый из элементов svg является обычным элементом dom. Это означает, что вы можете получить к нему доступ как тег p или что-то подобное.

Например, у вас есть круг в вашем svg с идентификатором circle01. Чтобы добавить на клик-событие, вы можете использовать:

$("#circle01").click(function (e) { ... }); 

с помощью JQuery или

document.getElementById("circle01").onclick = function (e) { ... }; 

через чистый JavaScript.

Чтобы понять магию SVG, вы должны знать, что это чистый HTML;)