svg图标css制作
使用CSS制作SVG图标
SVG图标可以通过CSS进行样式调整和动画效果添加。以下方法展示如何将SVG图标嵌入HTML并通过CSS控制其样式和行为。
内联SVG与CSS控制 将SVG代码直接嵌入HTML，通过CSS类或ID选择器控制样式：
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 2L4 12l8 10 8-10z"/>
</svg>.icon {
width: 24px;
height: 24px;
fill: #3498db; /* 修改填充颜色 */
transition: fill 0.3s ease;
}
.icon:hover {
fill: #e74c3c; /* 悬停变色效果 */
}外部SVG文件引用
通过<img>标签或CSS背景图引入外部SVG文件：
<img src="icon.svg" class="svg-icon" alt="Icon">.svg-icon {
filter: invert(75%); /* 使用CSS滤镜改变颜色 */
}CSS动画控制 为SVG路径添加动画效果：
.icon path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: draw 2s forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}响应式SVG设计
使用百分比或viewBox确保SVG在不同尺寸下保持比例：
.responsive-svg {
width: 100%;
height: auto;
}注意事项
- 内联SVG支持完整的CSS控制，包括路径、描边等属性
- 外部引用的SVG受同源策略限制，部分CSS属性可能无效
- 使用
currentColor关键字可以让SVG继承父元素的文字颜色
