Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG <a> tags don't work in Safari

The <a> tags inside my svg link perfectly to my modals in Google Chrome. However, in Safari the links do not work. I thought it was a modal issue, but I tested opening a separate modal and it worked. I think the problem lies in the svg, but I just can't get it to work. Any help would be much appreciated.

SVG html

<object>
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1190px" height="1261px" viewBox="0 0 1190 1261" enable-background="new 0 0 1190 1261" xml:space="preserve">
        <a href="#openRoom4_1">
            <polygon class="roomSVGs" fill="blue" points="626,259 827,324 980,191 775,137   "/>
        </a>
    </svg>
</object>

Modal html

        <div id="openRoom4_1" class="modalDialog">
            <div class="roomModal">
                <a href="#close" title="Close" class="close">&times;</a>
                <h2>Room 4.1</h2>
                   <p>Hi</p>
            </div>
        </div>
like image 221
John Rudell Avatar asked Nov 28 '25 06:11

John Rudell


1 Answers

Safari doesn't support href, you'd need to use xlink:href if you want things to work there.

xlink:href is SVG 1.1, href is an SVG 2 feature.

like image 149
Robert Longson Avatar answered Nov 30 '25 22:11

Robert Longson



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!