中键单击 svg 使用元素打开新选项卡

Question

使用 firefox，当我在 use 元素上单击鼠标中键（或按住 ctrl 并单击）时，它会在新选项卡中打开 xlink:href url（如 href)

错误或功能？

<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>

Answer 1

这是一个 unresolved bug 他们不太确定如何处理的问题。触发器是 xlink:href，它以某种方式在内部得到处理，就像 A.href 一样（单击鼠标中键或按住 ctrl 并单击打开新选项卡。）一种解决方法是将 xlink:href 元素埋在下面一个不可见的矩形：

    <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>

如果您有任何需要触发的事件，您必须将它们绑定到不可见的矩形。

Answer 2

作为先前答案中链接的错误的解决方法，您还可以在 use 元素上使用 pointer-events: none CSS 规则：

<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; pointer-events: none;"></use>
</svg>
<p>ctrl+click on right circle</p>

或者声明所有 use 元素不能被点击 <style>use{pointer-events: none;}</style>。

显然，此解决方法仅适用于元素根本不需要交互的情况。

中键单击 svg 使用元素打开新选项卡

middle-click on svg use element open new tab

firefox

svg

xlink