你熟悉 SVG 的样式设置吗？

有几种方法可以为形状着色（包括在对象上指定属性），可以使用内联 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; } 的操作，它将覆盖已定义的紫色填充。