Question

只需单击SVG中单独元素

即可添加Bootstrap模态叠加

SVG元素

<!-- Modal popup to go on #Layer_2 -->
<g id="Layer_2" data-toggle="modal" data-target="#myModal">
    <g>
        <rect x="99.3" y="22.5" class="st6" width="190" height="46.6" />
        <path class="st0" d="M288.7,23v45.6h-189V23H288.7 M289.7,22h-191v47.6h191V22L289.7,22z" /> 
    </g>
        <text transform="matrix(1 0 0 1 114.5521 49.8376)" class="st7 st8">Methodology</text>
        <text transform="matrix(1 0 0 1 213.987 36.7981)">
            <tspan x="0" y="0" class="st7 st9">• Consistent</tspan>
            <tspan x="0" y="11" class="st7 st9">• Repeatable</tspan>
            <tspan x="0" y="22" class="st7 st9">• Pattern Based</tspan>
        </text>
</g>

模态代码

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content"> </div> -->
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute !important; z-index: 10;right: 0;top: 0;color: white;"><span aria-hidden="true" style="font-size: 40px;margin-right: 10px;">&times;</span></button>
            <div class="modal-popup-header text-center">
                <h2>Methodology</h2> </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iste omnis, quo! Odit animi, tenetur dignissimos deserunt aliquid laboriosam mollitia, est quaerat, suscipit eveniet, saepe at quia? Modi nemo, sint.</p>
        </div>
        <!--<div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>--></div>
</div>

非常感谢任何帮助。干杯！

Answer 1

回答了我自己的问题：

简单地用特殊的标签包装g标签

<a xlink:href="#0" class="second_popup" data-toggle="modal" data-target="#myModal2">
    <g id="Layer_2">
        <!-- SVG code here -->
    </g>
</a>

希望这有助于任何希望使用弹出窗口和svg图层的人。

点击svg元素上的模态叠加

1 个答案: