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のほとんどのライブラリは、JavaScriptコードを経由してモーダルダイアログを開くことができ、例えば、ブートストラップまたはマテリアライズで

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

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

Answer 2

。このため、例を読んで、どのように開くかをお読みください。

svg要素でクリックイベントを許可するには、svg要素のそれぞれが通常のdom要素であることを知る必要があります。つまり、pタグなどのようにアクセスできます。

たとえば、IDがcircle01のあなたのsvgにサークルがあります。上のクリックイベントを追加するには、使用することができます。

jQueryの経由

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

または

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

純粋なJavaScriptで。 SVGの魔法を理解することが

、あなたはそれが純粋なHTMLであることを、知っている必要があります。）