css制作svg
使用CSS内联SVG
直接在HTML中嵌入SVG代码，通过CSS控制样式。SVG元素支持fill、stroke等属性，可直接用CSS修改。
<div class="svg-container">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" class="svg-circle"/>
</svg>
</div>.svg-circle {
fill: #3498db;
stroke: #2c3e50;
stroke-width: 3;
}通过CSS背景引入SVG
将SVG文件作为背景图像嵌入，适合静态图标或无需交互的场景。
.svg-bg {
width: 100px;
height: 100px;
background-image: url('icon.svg');
background-size: contain;
}使用CSS滤镜动态修改SVG
通过filter属性调整SVG颜色或效果，如灰度、模糊等。
.svg-filter {
filter: grayscale(50%) brightness(1.2);
}动画SVG元素
利用CSS动画或过渡为SVG添加动态效果。
.svg-circle {
fill: #3498db;
transition: fill 0.3s ease;
}
.svg-circle:hover {
fill: #e74c3c;
}响应式SVG设计
通过CSS确保SVG适配不同屏幕尺寸。
.svg-responsive {
width: 100%;
height: auto;
}注意事项
- 内联SVG支持完整的CSS选择器，外部SVG文件受跨域限制。
- 部分SVG属性如
stroke-dasharray需通过CSS前缀-webkit-或-moz-兼容。 - 使用
currentColor关键字可使SVG继承父元素的文本颜色。
以上方法可根据需求组合使用，灵活实现SVG的样式控制和交互效果。
