您是否熟悉SVG样式？

有这么几种方法可以为形状（Shapes）着色（包括在对象上指定属性），使用内联的 CSS、嵌入的 CSS 部分或外部 CSS 文件。 您在网页上找到的大多数 SVG 都使用内联 CSS，但是每种类型都有优劣之处。

可以通过在节点上设置两个属性来做基本着色：fill 和 stroke 。 fill设置对象内的颜色，stroke设置对象周围绘制的线的颜色。 你可以使用在 HTML 中的 CSS 颜色命名方案定义它们的颜色，比如说颜色名（像 red 这种）、rgb 值（像 rgb(255,0,0) 这种）、十六进制值、rgba 值，等等。

<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 样式所覆盖。 因此，如果你做了类似于svg { fill: blue; }的事情，它将覆盖已定义的紫色填充。