1

使用 Firefox，当我在元素上中键单击（或 ctrl+单击）时use，它会在新选项卡中打开xlink:hrefurl（如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>

4

2 回答 2

1

这是一个未解决的错误，他们不确定如何处理。触发器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>

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

于 2016-02-19T15:31:05.503 回答
0

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

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

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

于 2016-02-19T15:41:51.683 回答