为什么<image>里面的<svg>可以被:focus'ed？

Question

我在

<image>

元素内有一个

<svg>

元素，嵌入到 HTML 标记中。不知何故，当我使用

<image>

按钮浏览页面时，

:focus

元素会变得

Tab

'ed。而且它周围有丑陋的焦点框：

:focus { /* user agent stylesheet */
    outline: -webkit-focus-ring-color auto 5px;
}

这是 Chrome 129。

我有点惊讶，因为我认为

svg

中的矢量元素根本不应该是可聚焦的。

以下是款式：

为什么元素可以被

:focus

'ed以及如何防止它出现这样的行为？

Answer 1

当使用 Tab 按钮导航时，要防止焦点轮廓出现在

<image>

内的

<svg>

元素周围，您可以简单地使用 CSS 删除默认焦点轮廓。

添加以下样式以定位

<image>

内的

<svg>

元素并删除焦点轮廓：

svg image:focus {
    outline: none;
}

如果您希望完全阻止

<image>

元素成为焦点，您可以通过将

tabindex

设置为

-1

将其从选项卡导航中删除：

<svg>
    <image tabindex="-1" href="image.jpg" width="100" height="100" />
</svg>

这可确保

<image>

元素不可聚焦，并且在页面中切换时不会出现焦点轮廓。