Posted on | by liu
CSS可以为网站添加各种有趣的效果，其中有一个非常流行的效果是SVG。SVG，即可缩放矢量图形，是一种基于XML的矢量图形格式。
如果想在网站上使用SVG效果，需要在HTML中嵌入SVG代码，并使用CSS样式进行样式设置。下面就来介绍如何使用CSS添加SVG效果。
首先，在HTML文档中添加SVG代码。可以使用标签来定义SVG元素，然后在其中添加各种形状、路径等内容。例如，下面是一个简单的SVG代码段：
以上代码定义了一个半径为40，边框为绿色，填充为黄色的圆形。可以将以上代码复制到HTML文档中，在浏览器中运行，可以看到一个圆形的SVG图像。
接下来，使用CSS样式来对SVG图像进行样式设置。与HTML元素类似，SVG元素也可以使用CSS样式进行设置。例如，可以使用如下样式设置SVG元素的填充颜色和边框颜色：
svg {
fill: blue;
stroke: red;
}
以上样式将SVG元素的填充颜色设置为蓝色，边框颜色设置为红色。
此外，还可以添加一些动画效果来使SVG图像更加生动有趣。例如，可以使用CSS的animation属性来添加一个旋转动画。以下是一个旋转动画的CSS样式：
svg {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
以上样式将SVG元素添加旋转动画，旋转周期为2秒，旋转方式为线性，旋转角度为无限循环。可以将以上样式添加到HTML文档中，刷新页面，就可以看到一个带有旋转动画的SVG图像了。
总之，使用CSS添加SVG效果非常简单，只需在HTML中嵌入SVG代码，然后使用CSS样式进行样式设置和动画效果添加就可以了。希望以上介绍对大家有所帮助。