firefoxsvgxlink

middle-click on svg use element open new tab

With firefox, when I middle-click (or ctrl+click) on a use element, it open the xlink:href url in new tab (like a href)

bug or feature?

<svg viewBox="0 0 400 80">
    <circle id="circle" cx="40" cy="40" r="30" fill="#29e"></circle>
    <use xlink:href="#circle" transform="translate(70, 0)" style="stroke: red;"></use>
</svg>
<p>ctrl+click on right circle</p>

Solution

  • It's an unresolved bug that they're not really sure how to handle. Trigger is the xlink:href that gets somehow internally treated just like an A.href does (middle-click or ctrl + click open to a new tab.) One workaround is to bury the xlink:href element under an invisible rect:

        <svg viewBox="0 0 400 80">
        <circle id="circle" cx="40" cy="40" r="30" fill="#29e" />
        <use xlink:href="#circle" transform="translate(70, 0)" style="stroke: red;" />
        <rect style="opacity:0" x="80" y="10" width="60" height="60" />
    </svg>
    <p>ctrl+click on right circle - nothing happens</p>

    If you have any events that need to trigger, you'll have to tie them to the invisible rect.