CSS3伪类与SVG可渲染元素的兼容性是什么？

我一直在学习SVG,并发现了 this informative article.作者说

Most CSS selectors can be used to select SVG elements. In addition to the general type,class and ID selectors,SVGs can be styled using CSS2’s dynamic pseudo-classes (:hover,:active and :focus) and pseudo-classes (:first-child,:visited,:link and :lang. The remaining CSS2 pseudo-classes,including those having to do with generated content (such as ::before and ::after),are not part of the SVG language deFinition and,hence,have no effect on the style of SVGs.

这篇作者在网上有很多文章,看起来非常有见识.然而,“剩余的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：第n个孩子伪类在这里工作得很好(填充第二个矩形红色).另一个例子：用另一个CSS3伪类选择符替换上面的第n个子规则：a：not rule(其余的都保持不变)：

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

我找到了this reference,但并没有帮助我.

CSS3伪类与SVG元素的兼容性是什么？

注意：我假设这些伪类规则只适用于SVG renderable elements.

解决方法

这是一个 pen,它通过将填充或笔触属性应用于SVG可渲染元素来演示CSSG伪类选择器(由@andrewli概述)在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元素.
>因为：空被应用于所有void svg元素(< rect>,< circle>,< ellipse>,< polygon>等),它是用于定位SVG形状元素的便利选择器.

CSS3伪类与SVG可渲染元素的兼容性是什么？

解决方法

相关文章