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的样式控制和交互效果。