为什么:hover无法在< symbol>内部工作?在SVG中?(在Chrome中) [英] Why doesn't :hover work inside of a <symbol> in SVG? (In Chrome)

问题描述

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

It's strange that I couldn't find anyone else reporting this problem; that makes me think perhaps I am doing something wrong.

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

I have a <style> tag within an SVG that contains a :hover pseudo-class, it works properly when the SVG is directly embedded into the HTML, but when I put it within a symbol and reference it with a <use> tag, the styles inside the <style> tag are not applied.

直接嵌入的SVG:

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

以符号定义，并通过< use> 标记进行引用.

Defined in a symbol, and referenced via the <use> tag.

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

为什么会这样?似乎是一种怪异的行为，我想念什么吗?！

Why is this happening?! Seems like a weird behavior, am I missing something?!

更新:正如注释中提到的Temani Afif一样，此问题仅存在于Chrome中，Firefox似乎可以正常工作.(尚未在其他任何浏览器上进行测试)

UPDATE: As Temani Afif mentioned in the comments, this problem exists only in Chrome, Firefox seems to work as expected. (Haven't tested on any other browsers)

推荐答案

这实际上是一个有趣的案例，尽管Temani Afif提供了正确的解决方案，但我认为在一个单独的答案中再说几句话是值得的.

This is actually an interesting case, and while Temani Afif gave the right solution, I think it is worth a few more words in a separate answer.

首先，问题不是< style> 标记位于何处.它可能真的在任何地方.真正的问题是由:hover 选择器提出的.

First off, the question is not where the <style> tag sits. It could really be anywhere. The real question is raised by the :hover selector.

<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规范有一小段文字"CSS2选择器不能应用于(概念上)克隆的DOM树""，但 SVG 2规范删除了该句子.

The previous SVG 1.1 spec had a short paragraph that said "CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree", but the SVG 2 spec dropped that sentence.

关于< use> 元素的样式继承如何工作，现在有很多话要说.但所有这些都涉及一个问题:如果相应，有样式规则元素(< symbol> )，如何将它们应用于阴影实例(< use> 中的内容)?"

It now has a lot to say about how style inheritance works for <use> elements. but all of it concerns the question: "If there are style rules for the corresponding element (the <symbol>), how are they applied to the shadow instance (what is inside the <use>)?"

但是我确实找不到答案的一个问题是:如果伪类状态适用于

But one question I really could find no answer to is: If a pseudo-class state applies to a shadow host, can the shadow instance elements also have that state? Or, to state it more clearly: If a pointer hovers over a <use> element, does it also hover over the elements inside the shadow tree?

CSS选择器或 :: shadow被删除时提出的建议)，但这并不相同:没有人尝试选择阴影树，只是规则选择了一个相应的元素.

There are no obvious answers in CSS Selectors or CSS Scoping, to name the other two relevant specs. And while Temani Afif alludes to the second one (and what was proposed when ::shadow was removed), this is not the same: nobody tries to select into the shadow tree, it is just that the rule selects a corresponding element.

这是Firefox回答是"的地方.并且Chrome回答否".错误是哪一个?有趣的是，我在两个错误跟踪器中都找不到错误报告.

That is where Firefox answers "yes" and Chrome answers "no". Which one is the bug? Interestingly, I could not find a bug report in either of the bug trackers.

这篇关于为什么:hover无法在< symbol>内部工作?在SVG中?(在Chrome中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！