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>