CSS指南中的SVG属性

本指南探讨了CSS和可伸缩矢量图形（SVG）的相交，重点是使用CSS属性进行样式SVG元素。尽管存在许多SVG属性，但只有某些SVG属性（主要呈现属性）才能直接使用CSS来设计。某些CSS属性与SVG共享（例如font-size和opacity ），而另一些则是SVG特定的。

例如，要为元素变色， fill属性在CSS中起作用，因为fill是一个呈现属性：

圆圈 {
  填充：红色；
}

本指南全面详细介绍了可用的SVG元素及其相应的CSS属性，涵盖了包括通用样式和动画在内的各种样式技术。

SVG元素和CSS属性：分类的概述

以下概述演示文稿归因于CSS属性，为了清楚起见。弃用元素被排除在外。

CSS和SVG共享属性

字体属性

文本属性

掩蔽属性

交互性属性

颜色属性

可见性属性

SVG特异性CSS属性

文本属性

剪辑属性

掩蔽属性

过滤效果

梯度特性

交互性属性

颜色属性

绘画特性

SVG 2和CSS样式

虽然呈现归因于CSS和SVG样式之间的差距，但SVG 2（目前在候选建议中）显着增强了这种交互，从而可以控制使用CSS对元素坐标和尺寸的控制。

SVG 2规范阐明了：

“某些样式属性不仅可以用样式表和'样式'属性指定，还可以在演示属性中指定。这些是其名称匹配（或相似）的属性，与给定的CSS属性匹配（或相似），其值被解析为该属性的值。”

这意味着CSS，包括:hover和:active ，可以通过演示属性或样式表的svg属性进行样式属性。 SVG 2还引入了用于样式的其他演示属性。有关完整列表，请参阅SVG 2规范。

特定于元素的属性支持

要记住，CSS属性支持随SVG元素的不同而言至关重要。某些属性是特定于元素的。例如，<circle></circle>和<ellipse></ellipse>支持cx ， cy ， rx和ry ，但其他元素可能不会。

几何特性

SVG 2将诸如rx和ry类的属性定义为几何属性，可与CSS与填充或冲程等呈现属性以及诸如fill或stroke类的属性。

用CSS定位SVG元素（SVG 2）

SVG 2允许基于CSS的定位。考虑一个矩形：

<svg height="170" width="170"><rect height="150" width="150" x="10" y="10"></rect></svg>

使用SVG 2，可以通过CSS控制x和y属性：

 / *与SVG 2 */
rect {
  X：10;
  Y：10;
  / * ...其他样式... */
}

将SVG标记简化为：

<svg height="170" width="170"><rect height="150" width="150"></rect></svg>

同样，可以使用CSS设置width和height ，从而进一步最小化SVG代码。

目前，Blink（Chrome，Opera）和Webkit（Safari）浏览器为这些SVG 2功能提供了更好的支持。对于更广泛的兼容性，需要替代技术。

SVG形状与CSS变形

CSS可用于创建形状变形效果。涉及的SVG路径必须具有相同的命令，并具有相同数量的成功变形。

示例：将三角形变成正方形。

<svg height="220" width="300"><path d="M150 10 L40 200 L260 200Z"></path></svg>

CSS覆盖路径：

小路 {
  D：路径（“ M150，10 L40，200 L260，200Z”）; / *初始形状 */
  填充：＃4C6EDB;
}

路径：活动{
  D：路径（“ M10,10 L160,10 L160,160 L10,160 Z”）; / *变形的形状 */
  填充：＃4C6EDB;
  过渡：所有0.35 s selie;
}

SVG标记简化为：

<svg height="220" width="300"><path></path></svg>

用CSS对SVG属性进行动画操作

CSS动画和过渡动画SVG属性。此示例演示了一个带有五个圆圈的波动动画：

<svg height="250" width="350"><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle></svg>

具有变量的CSS和:nth-child() ：

 / * ...颜色和初始圆形样式的CSS ... */

。形状 {
  / * ...初始样式... */
  动画：Movecircle 1250ms易于插入两个无限；
}

/ * ...每个圆圈的动画 -   -  */

@keyframes movecircle {
  50％{
    CY：150;
    R：13;
  }
}

动画<pattern></pattern>元素也是可能的。

结论

尽管SVG 2具有功能强大的CSS样式功能，但仍在开发广泛的浏览器支持。供生产使用，请仔细考虑兼容性。随着SVG 2的成熟，SVG几何特性的CSS样式将变得越来越强大和可靠。

以上是CSS指南中的SVG属性的详细内容。更多信息请关注PHP中文网其他相关文章！