---
title: 你熟悉 SVG 的样式设置吗？
---

有几种方法可以为形状着色（包括在对象上指定属性），可以使用内联 CSS、嵌入式 CSS 部分或外部 CSS 文件。 您在网络上找到的大多数 SVG 都使用内联 CSS，但每种类型都有其优点和缺点。

可以通过在节点上设置两个属性来完成基本着色：`fill` 和 `stroke`。 `fill` 设置对象内部的颜色，`stroke` 设置绘制在对象周围的线条的颜色。 您可以使用在 HTML 中使用的相同 CSS 颜色命名方案，无论是颜色名称（即 `red`）、RGB 值（即 `rgb(255,0,0)`）、十六进制值、RGBA 值等。

```html
<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />
```

上面的 `fill="purple"` 是*表现属性*的一个例子。 有趣的是，与 `style="fill: purple"` 这样的内联样式（它也恰好是一个属性）不同，表现属性可以被样式表中定义的 [CSS 样式覆盖](https://css-tricks.com/presentation-attributes-vs-inline-styles/)。 因此，如果您执行类似 `svg { fill: blue; }` 的操作，它将覆盖已定义的紫色填充。
