SVG顏色詳解

一、SVG顏色代碼

SVG是一種基於XML的矢量圖形，因此顏色也是使用代碼來定義的。SVG支持多種表示顏色的方式:

1、十六進制表示法

<path fill="#FF0000" />

2、RGB表示法

<path fill="rgb(255, 0, 0)" />

3、RGBA表示法

<path fill="rgba(255, 0, 0, 0.5)" />

4、顏色名表示法

<path fill="red" />

二、SVG顏色表

SVG顏色表是一份包含顏色名稱和其對應顏色代碼的列表。SVG 1.1規範定義的SVG顏色表包含147種顏色名稱，這些名稱代表了顏色的通用用途，如red、green、blue等。

以下是部分SVG顏色表：

三、SVG顏色很淺

SVG顏色通常不會像CSS顏色那樣深，因為SVG通常用於需要在不同分辨率和放大倍率下保持清晰度的情境。如果使用太深的顏色，可能會失去清晰度。一般建議使用更淺的顏色。

四、CSS SVG顏色

CSS也可以用於 SVG，可以使用CSS屬性設置 SVG 圖形的顏色，如:

svg path {
  fill: red;
}

五、CSS改變SVG顏色

CSS也可以通過hover等操作來改變SVG顏色。

svg path {
  fill: red;
}
svg path:hover {
  fill: blue;
}

六、SVG怎麼改變顏色

除了使用CSS之外，還可以使用Javascript動態改變SVG顏色。比如下面的代碼：

var path = document.getElementById('path');
path.setAttribute("fill", "blue");

七、SVG顏色設置不能用

有時候，當我們在構建SVG時，可能會發現設置的顏色並沒有被渲染出來。這可能是因為在SVG內使用了一些內建的顏色名稱，比如currentColor、inherit等。當這些顏色名稱使用在某些元素上時，可能會影響到其它元素的顏色表現。解決方法可能是將這些顏色名稱替換為具體的顏色代碼。

八、SVG顏色屬性

SVG中的顏色屬性很多，以下列舉幾個：

1、fill屬性：用於設置填充顏色

<path fill="red" />

2、stroke屬性：用於設置圖形邊框顏色

<path stroke="blue" />

3、opacity屬性：用於設置透明度，屬性值0表示完全透明，1表示完全不透明。

<path opacity="0.5" />

九、SVG顏色漸變

SVG顏色漸變是一種在SVG中實現漸變效果的方式，可以使用線性漸變、徑向漸變等方式實現。以下是一個使用線性漸變實現的例子：

<svg width="300" height="300">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="300" height="300" fill="url(#grad)" />
</svg>

十、SVG顏色帶點選取

SVG顏色帶點選取是一種常見的選取顏色的方式。可以使用SVG中的<input type="color">實現。以下是一個例子：

<input type="color" id="color-picker" />
<script>
  var colorPicker = document.getElementById('color-picker');
  colorPicker.addEventListener('input', function() {
    var color = this.value;
    // do something with the selected color
  });
</script>