SVG图像是基于XML的矢量图像,可以用于网页的图形元素、图像和动画等。CSS可以用于控制SVG图像,包括修改SVG图像的大小、颜色、边框、填充等。此外,CSS还可以用于添加样式特效,例如阴影、渐变、动画等。
下面列出了一些常用的CSS属性,可用于控制SVG图像的样式:
下面是一个简单的SVG图像,我们可以使用CSS属性来控制它的样式:
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" />
</svg>
使用CSS属性修改SVG图像的样式:
svg {
width: 200px;
height: 200px;
fill: #ff0000;
stroke: #000000;
stroke-width: 2px;
opacity: 0.5;
filter: drop-shadow(2px 2px 2px #cccccc);
transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}
上述代码将SVG图像的宽度和高度都修改为了200px,填充颜色为红色,边框颜色为黑色,边框宽度为2px,透明度为0.5,添加了一个阴影效果,同时将SVG图像向右下平移50px,旋转45度,缩放为原来的1.5倍。