SVG改顏色完全指南

一、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;
}

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

/* CSS樣式表 */
.new-class {
  fill: green;
  stroke: yellow;
}

上面的代碼中，我們通過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圖形的顏色。希望上面的內容能對你有所幫助！