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标签创建。
