svg图片怎么添加样式

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，它允许你在网页上创建可缩放的图形，而不会丢失清晰度。要给SVG图片添加样式，你可以使用CSS（层叠样式表）。以下是一些基本步骤：

1. **内联样式**：直接在SVG标签内部添加`style`属性，例如：

<svg width="50" height="50" viewBox="0 0 100 100" style="fill: red; stroke: blue;">
  <circle cx="50" cy="50" r="40" />
</svg>

这里的`fill`设置填充颜色，`stroke`设置边框颜色。

2. **外部链接**：将样式放在单独的`.css`文件里，并通过`<use>`元素引用，同时指定`xlink:href`属性指向CSS资源：

<style type="text/css">
  .my-circle {
    fill: green;
    stroke-width: 2px;
  }
</style>

<svg>
  <use xlink:href="#my-circle" class="my-circle"/>
</svg>

<!-- SVG片段 -->
<symbol id="my-circle" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" />
</symbol>

3. **CSS选择器**：如果你有多组SVG元素需要共享样式，可以使用类或ID选择器来应用：

<svg>
  <circle class="styled-rectangle" x="60" y="70" width="80" height="30" />
</svg>

<style type="text/css">
  .styled-circle, .styled-rectangle {
    fill: purple;
    stroke: yellow;
  }
</style>