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元素。