Какова совместимость псевдоклассов CSS3 с SVG-визуализируемыми элементами?

Я изучаю SVG и встретил эту информативную статью. Автор утверждает, что

Большинство селекторов CSS могут использоваться для выбора элементов SVG. В дополнение к общим типам, селекторам классов и идентификаторов, SVG могут быть созданы с использованием динамических псевдоклассов CSS2 (: hover,: active и: focus) и псевдоклассов (: first-child,: visited,: link и: lang Остальные псевдоклассы CSS2, в том числе связанные с созданным контентом (такие как:: before и:: after), не являются частью определения языка SVG и, следовательно, не влияют на стиль SVG.

У этого автора есть много статей в Интернете и он очень хорошо осведомлен. Однако утверждение "оставшиеся псевдоклассы CSS2.... не влияют на стиль SVG" заставляет задуматься о псевдоклассах CSS3. Возьмем этот пример, который я сгенерировал на Codepen (FF в качестве браузера).

<svg width="220" height="220" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="100" height="100" />
    <rect x="110" y="110" width="100" height="100" />
</svg>

<style>
    svg { border: 3px dashed #999 }
    svg > rect:hover { fill: green }
    rect:nth-child(even) { fill:red }
</style>

Псевдокласс CSS3 : nth-child отлично работает здесь (заполняет второй прямоугольник красным). Другой пример: замените правило : nth-child выше с другим селектором псевдокласса CSS3, правилом : не (все остальное остается тем же):

rect:not([x="110"]) { fill:red } // fills the 1st rectangle red

Я нашел эту ссылку, но мне это не помогает.

Какова совместимость псевдоклассов CSS3 с элементами SVG?

Примечание. Я предполагаю, что эти правила псевдокласса применимы только к SVG отображаемым элементам.

Ответы

Ответ 1

Здесь pen, который демонстрирует применение полного списка CSS3 Pseudo-class Selectors (выделено @andrewli) на SVG применяя атрибуты fill или stroke к SVG-визуализируемым элементам.

Я определил различные элементы SVG в двух разных группах (два родительских элемента, показанных в пером как два столбца), чтобы поместиться во все псевдоклассы, которые выбирают разные типы детей:

<svg width="450" height="300">
  <g transform="translate(5,5)">
    <rect x="0" y="0" width="25" height="25" />
    <rect x="0" y="40" width="25" height="25" />
    <rect x="0" y="80" width="25" height="25" />
    <circle cx="15" cy="132" r="13.5"/>
    <circle cx="15" cy="170" r="13.5"/>
    <polygon points="2,200 28,200 14,225"/>
    <rect x="0" y="240" width="25" height="25" />
  </g>
  <g transform="translate(5,5)">
    <rect x="220" y="0" width="25" height="25" />
  </g>
  <g transform="translate(5,5)" font-family="Verdana" font-size="16" fill="#444">
    <text x="40" y="20" >:root</text>
    <text x="40" y="60">:nth-child(2)</text>
    <text x="40" y="100">:nth-of-type(3)</text>
    <text x="40" y="140">:first-of-type</text>
    <text x="40" y="180">:nth-last-of-type(1)</text>
    <text x="40" y="220">:only-of-type, :last-of-type</text>
    <text x="40" y="260">:nth-last-child(1), :last-child</text>
    <text x="260" y="20">:only-child, :last-child</text>
  </g>
</svg>

Интересные выводы:

  • :root, похоже, работает. Как и ожидалось, он применяется ко всем элементам, включая элементы svg, в документе.
  • Так как :empty применяется ко всем void svg elements, (<rect>, <circle>, <ellipse>, <polygon> и т.д.), это удобный селектор для ориентации элементов формы SVG.

Ответ 2

Ниже приведен полный список селекторов псевдодоклада CSS3, как определено в Селектор уровня 3 Editor Draft, где те, у кого bolded links совместимы с SVG:

  • :target, выбирает элементы, которые нацелены с помощью идентификаторов фрагментов
  • :root, выбирает корень документа, который является тегом html, с более высокая специфичность
  • :nth-child(an+b), выбирает элемент с an+b-1 братьями и сестрами перед ним в дереве документов
  • :nth-of-type(an+b), выбирает элемент, у которого an+b-1 siblings перед ним с тем же именем элемента в дерево документов
  • :nth-last-of-type(an+b), выбирает элемент с an+b-1 siblings после него с тем же именем элемента в дерево документов
  • :last-child, выбирает любой элемент, который является последним дочерним элементом его родительского
  • :first-of-type, выбирает первого родного брата своего родительского типа
  • :last-of-type, выбирает последний родной тип его родительских дочерних элементов
  • :only-child, выбирает элемент с родительским элементом, у которого нет других дочерних элементов
  • :only-of-type, выбирает элемент с родительским элементом, у которого нет других детей с тем же элементом имя
  • :empty, выбирает элемент, у которого вообще нет детей
  • :not(X), выбирает элемент, который не выбран селектором X, который является простой селектор

Они были определены, но без смыслового значения в черновике:

  • :enabled
  • :disabled
  • :checked
  • :indeterminate

Приведенные выше значения даны в Спецификация HTML5 вместе с несколькими другими определениями для других псевдоклассов.

Таким образом, похоже, что все псевдоклассы CSS3 работают, за исключением :root. Вы можете прочитать больше в документация MDN для псевдоклассов. Я не мог найти надежный ресурс, описывающий совместимость, так что все это было определено путем тестирования. В CSS3 нет других псевдоклассов или псевдоэлементов.