SVG改颜色完全指南

发布时间：2023-05-16

一、SVG颜色设置不能用

在CSS中，可以通过 color、background-color 等属性来改变元素的颜色。但是，SVG中并没有类似的颜色设置属性。 因为SVG是一种矢量图形格式，它不是像图片一样由像素点组成，而是以路径、矩形、圆形等形状的集合组成的。所以，SVG的颜色是通过填充和描边来实现的。 对于填充和描边，可以通过 style 或 direct 属性来设置，例如：

<rect x="10" y="10" width="50" height="50" style="fill: red; stroke: blue; stroke-width: 2px;" />

上面的代码以矩形的形式绘制了一个红色的填充和蓝色的描边，描边的宽度为2像素。

二、SVG颜色怎么改

除了在元素上设置 style 或 direct 属性来改变颜色，还可以使用CSS样式表和JavaScript脚本来改变SVG的颜色。

1. 使用CSS来改变SVG填充和描边的颜色

可以使用CSS样式表中的属性来改变SVG元素的填充和描边的颜色，例如：

<svg>
  <rect x="10" y="10" width="50" height="50" class="rect" />
</svg>

/* CSS样式表 */
.rect {
  fill: red;
  stroke: blue;
  stroke-width: 2px;
}

上面的代码中，我们给矩形元素定义一个class为 rect，然后在CSS样式表中给这个class定义了填充为红色、描边为蓝色、描边宽度为2像素。 如果想要动态改变SVG元素的颜色，也可以通过JavaScript来操作CSS样式表来实现。例如：

<svg>
  <rect id="rect" x="10" y="10" width="50" height="50" class="rect" />
</svg>

/* CSS样式表 */
.rect {
  fill: red;
  stroke: blue;
  stroke-width: 2px;
}
.new-class {
  fill: green;
  stroke: yellow;
}

/* JavaScript脚本 */
var rect = document.getElementById("rect");
rect.setAttribute("class", "new-class");

上面的代码中，我们通过JavaScript找到id为 rect 的矩形元素，然后将它的 class 属性设为 new-class，接着在CSS样式表中定义 new-class 的填充为绿色、描边为黄色。

2. 使用JavaScript来改变SVG填充和描边的颜色

除了使用CSS来改变SVG颜色外，还可以使用JavaScript来动态地改变SVG颜色。 与CSS相比，使用JavaScript来改变SVG颜色需要更多的代码，但是在一些特殊情况下，它是必须的。例如，如果需要在用户交互的过程中改变SVG颜色，或者需要动态生成SVG元素并改变它们的颜色。 使用JavaScript改变SVG颜色的方法有很多，我们下面介绍其中两种：

（1）使用 setAttribute 方法来改变填充和描边的颜色
<svg>
  <rect id="rect" x="10" y="10" width="50" height="50" style="fill: red; stroke: blue; stroke-width: 2px;" />
</svg>

/* JavaScript脚本 */
var rect = document.getElementById("rect");
rect.setAttribute("style", "fill: green; stroke: yellow; stroke-width: 2px;");

上面的代码中，我们通过JavaScript找到id为 rect 的矩形元素，然后使用 setAttribute 方法来将它的 style 属性设为 fill: green; stroke: yellow; stroke-width: 2px;。

（2）使用 setAttributeNS 方法来改变填充和描边的颜色
<svg>
  <rect id="rect" x="10" y="10" width="50" height="50" style="fill: red; stroke: blue; stroke-width: 2px;" />
</svg>

/* JavaScript脚本 */
var rect = document.getElementById("rect");
rect.setAttributeNS(null, "style", "fill: green; stroke: yellow; stroke-width: 2px;");

与上面的方法类似，上面的代码中我们也通过JavaScript找到id为 rect 的矩形元素，然后使用 setAttributeNS 方法来将它的 style 属性设为 fill: green; stroke: yellow; stroke-width: 2px;。这种方法在处理带有命名空间的SVG属性时比 setAttribute 更有用。

三、SVG箭头改变颜色

SVG中，箭头是通过在线段末尾添加 marker 元素实现的。marker 元素是一种可以在矢量图形中绘制自定义图形的神器，它可以让我们轻松地绘制各种形状的箭头、圆点等。 如果要改变SVG箭头的颜色，需要先定义一个 marker 元素，然后将其赋给箭头元素的 marker-end 属性。

<svg>
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto">
      <path d="M0,0 L0,6 L10,3 Z" style="fill: red;" />
    </marker>
  </defs>
  <line x1="10" y1="10" x2="90" y2="90" style="stroke: blue; marker-end: url(#arrow);" />
</svg>

上面的代码中，我们先在图形中定义了一个id为 arrow 的 marker 元素，并指定了其大小、位置和方向。marker 元素内部的 path 元素定义了箭头的形状和颜色。 然后，我们在一条线段元素中使用了这个 marker 元素，并使用 style 属性设定了线段的颜色。 如果要动态地改变SVG箭头的颜色，可以通过JavaScript来操作 path 元素的 style 属性，例如：

<svg>
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto">
      <path id="arrow-path" d="M0,0 L0,6 L10,3 Z" style="fill: red;" />
    </marker>
  </defs>
  <line id="line" x1="10" y1="10" x2="90" y2="90" style="stroke: blue; marker-end: url(#arrow);" />
</svg>

/* JavaScript脚本 */
var arrowPath = document.getElementById("arrow-path");
arrowPath.style.fill = "green";

上面的代码中，我们找到id为 arrow-path 的 path 元素，然后将它的 fill 属性设为 green，从而改变箭头的颜色。

结语

SVG是一种非常强大的矢量图形格式，它可以让我们绘制出拥有复杂形状和动态交互的图形。在处理SVG颜色时，我们可以通过CSS样式表、JavaScript脚本和 marker 元素来改变SVG元素的颜色。只要掌握了这些技巧，就能让我们更灵活地处理SVG图形的颜色。希望上面的内容能对你有所帮助！

推荐文章