为什么 :hover 在 SVG 的 <symbol> 内不起作用？ （在 Chrome 中）[重复]

Question

奇怪的是我找不到其他人报告这个问题；这让我觉得也许我做错了什么。

我在包含:hover 伪类的 SVG 中有一个 <style> 标记，当 SVG 直接嵌入 HTML 时它可以正常工作，但是当我将它放在符号中并用 @ 引用它时987654324@标签，<style>标签内的样式不适用。

SVG 直接嵌入：

<svg width="400" height="110">
  <style>
    #myRect:hover {
      fill: red;
    }
  </style>
  <rect id="myRect" width="300" height="100" />
</svg>

在符号中定义，并通过<use> 标签引用。

<svg style="display: none">
  <symbol id="rectangle">
      <style>
        #myRect:hover {
          fill: red;
        }
      </style>
      <rect id="myRect" width="300" height="100" />
  </symbol>
</svg>

<svg width="400" height="110">
    <use href="#rectangle"></use>
</svg>

为什么会这样？！似乎是一种奇怪的行为，我错过了什么吗？！

更新：正如 Temani Afif 在 cmets 中提到的，这个问题只存在于 Chrome 中，Firefox 似乎可以正常工作。 （未在任何其他浏览器上测试过）

Answer 1

这实际上是一个有趣的案例，虽然 Temani Afif 给出了正确的解决方案，但我认为值得在单独的答案中多说几句。

首先，问题不在于<style> 标签的位置。它真的可以在任何地方。真正的问题是由:hover 选择器提出的。

<svg style="display: none">
  <symbol id="rectangle">
      <style>
        #myRect {
          fill: blue;
        }
        #myRect:hover {
          fill: red;
        }
      </style>
      <rect id="myRect" width="300" height="100" />
  </symbol>
</svg>

<svg width="400" height="110">
    <use href="#rectangle"></use>
</svg>

之前的SVG 1.1 spec 有一个简短的段落说“CSS2 选择器不能应用于（概念上）克隆的 DOM 树”，但SVG 2 spec 删除了这句话。

关于<use> 元素的样式继承如何工作，现在有很多话要说。但所有这些都涉及一个问题：“如果corresponding element（<symbol>）有样式规则，它们如何应用于shadow instance（<use> 里面是什么？”

但我确实找不到答案的一个问题是：如果伪类状态适用于shadow host，影子实例元素是否也可以具有该状态？ 或者，陈述它更清楚一点：如果指针悬停在 <use> 元素上，它是否也悬停在阴影树内的元素上？

在CSS Selectors 或CSS Scoping 中没有明显的答案来命名其他两个相关规范。虽然 Temani Afif 提到了第二个（以及 ::shadow was removed 时提出的建议），但这并不相同：没有人试图选择影子树，只是规则选择了相应的元素。

这就是 Firefox 回答“是”而 Chrome 回答“否”的地方。哪一个是错误？有趣的是，我在任何一个错误跟踪器中都找不到错误报告。

Answer 2

使用 CSS 变量的替代方法可以通过继承跨越阴影：

use[href*="rectangle"]:hover {
  --f:red;
}

<svg style="display: none">
  <symbol id="rectangle">
      <rect style="fill:var(--f)"  width="300" height="100" />
  </symbol>
</svg>

<svg width="400" height="110">
    <use href="#rectangle"></use>
</svg>

没有内联样式的作品：

use[href*="rectangle"]:hover {
  --f:red;
}

<svg style="display: none">
  <symbol id="rectangle">
    <style>
      rect {
        fill:var(--f);
      }
    </style>
      <rect  width="300" height="100" />
  </symbol>
</svg>

<svg width="400" height="110">
    <use href="#rectangle"></use>
</svg>