为什么 :hover 不适用于 SVG 元素，替代方案是什么？

SVG USE 元素和 :hover 样式 – 浏览器支持问题

尝试将 :hover 样式应用于通过

嵌入的 SVG 元素时定义>使用 ，某些浏览器可能会遇到限制。

浏览器支持限制

SVG 规范明确规定 CSS2 选择器不能应用于概念克隆的 DOM 引用的元素树。这意味着 :hover 不能用于定位嵌入对象中的特定元素。

Firefox 的例外

Firefox 是一个例外，支持“虚拟”的寻址” 通过 包含的元素虫洞。但是，其他浏览器不具备此功能。

使用 currentColor 的替代方法

更广泛支持的方法是设置引用的方法，而不是依赖 :hover元素的填充或描边值设置为 currentColor。通过修改的颜色属性元素悬停时，引用元素的填充或描边颜色会相应改变。

这里有一个示例：

<svg version="1.1" width="640" height="480"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <style type="text/css">
    #p0 {fill:currentColor}
    #use1:hover {color:green}
    #use2:hover {color:red}
    #use3:hover {color:blue}
  </style>

  <defs>
    <polygon>

通过采用此技术，您可以有效地更改嵌入 SVG 的填充或描边颜色当 时的元素元素悬停在上方，从而模仿 :hover 在这些元素上的效果。

以上是为什么 :hover 不适用于 SVG 元素，替代方案是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！