css制作svg

使用CSS直接绘制SVG图形

CSS可以通过伪元素和基础属性绘制简单SVG图形，但复杂图形建议使用原生SVG标签。

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

内联SVG与CSS样式结合

将SVG代码直接嵌入HTML，通过CSS控制样式：

<div class="svg-container">
  <svg viewBox="0 0 100 100">
    <circle class="svg-circle" cx="50" cy="50" r="40"/>
  </svg>
</div>

.svg-container {
  width: 200px;
  height: 200px;
}

.svg-circle {
  fill: #3498db;
  stroke: #2980b9;
  stroke-width: 3;
  transition: fill 0.3s;
}

.svg-circle:hover {
  fill: #e74c3c;
}

使用CSS变量控制SVG属性

通过CSS自定义属性动态修改SVG表现：

:root {
  --svg-fill: #9b59b6;
  --svg-stroke: #8e44ad;
}

.svg-shape {
  fill: var(--svg-fill);
  stroke: var(--svg-stroke);
}

背景图像中使用SVG

将SVG作为CSS背景图像应用：

.element {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f1c40f"/></svg>');
  background-size: contain;
}

动画SVG元素

使用CSS关键帧动画驱动SVG属性变化：

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.svg-gear {
  transform-origin: 50% 50%;
  animation: rotate 5s linear infinite;
}

响应式SVG设计

通过CSS媒体查询适配不同尺寸：

.svg-wrapper {
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .svg-element {
    stroke-width: 2px;
  }
}

滤镜效果应用

为SVG添加CSS滤镜效果：

.svg-filter {
  filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.3));
}

.svg-blur {
  filter: url(#blur-effect);
}

注意事项

复杂路径和图形建议使用专业矢量工具生成SVG代码后通过CSS控制样式。CSS主要控制SVG的表现层属性，如颜色、透明度、变换等，而基本形状仍需通过SVG标签创建。