css制作svg
使用CSS制作SVG
CSS可以用于控制和修改SVG元素的样式，包括颜色、大小、边框等。以下是几种常见的方法：
内联样式
直接在SVG标签中使用style属性添加CSS样式：
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" style="fill: red; stroke: black; stroke-width: 3;" />
</svg>外部CSS文件
通过外部CSS文件或<style>标签控制SVG样式：
<style>
.svg-circle {
fill: blue;
stroke: black;
stroke-width: 2;
}
</style>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" class="svg-circle" />
</svg>动态修改样式
使用CSS伪类或JavaScript动态修改SVG样式：
<style>
.svg-circle:hover {
fill: green;
}
</style>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" class="svg-circle" />
</svg>SVG与CSS动画
使用CSS动画为SVG添加动态效果：
<style>
.svg-circle {
fill: red;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
</style>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" class="svg-circle" />
</svg>注意事项
- SVG元素的CSS属性可能与普通HTML元素不同，例如
fill代替background-color。 - 某些SVG属性（如
viewBox）无法通过CSS修改。 - 确保CSS选择器正确匹配SVG元素。
