阅读量:0
SVG 2D入门5中，颜色可以通过预定义的颜色名称、十六进制值或RGB函数来表示。红色可以表示为
red、#ff0000 或 rgb(255,0,0)。在HTML5的SVG（Scalable Vector Graphics）中，颜色的表示及定义方式是实现图形绘制和动画效果的关键，SVG支持多种颜色定义方法，这些方法不仅适用于图形的填充（fill），也适用于描边（stroke）。
基本颜色表示方法
1、颜色名称：直接使用预定义的颜色名，如red、blue、black等。
2、RGB值：通过红、绿、蓝三个颜色通道的组合来定义颜色，例如rgb(255,0,0)表示红色。
3、十六进制值：使用#后跟六位十六进制数来表示颜色，如#FF0000代表红色。
4、RGBA值：在RGB基础上增加了透明度通道，格式为rgba(255,100,100,0.5)，其中最后一个参数表示透明度。
高级颜色表示方法
1、线性渐变：使用<linearGradient>元素定义，每个颜色点由<stop>元素指定，可以通过offset属性设置颜色点的位置，stopcolor定义颜色，stopopacity定义透明度。
2、环形渐变：使用<radialGradient>元素定义，与线性渐变类似，但颜色从中心向外扩散。cx,cy,r属性定义了渐变的中心和半径，fx,fy定义颜色中心的焦点位置。
3、图案填充：使用自定义图案作为填充色，通过<pattern>元素定义图案，可以包含图像或图形元素，并通过<image>元素引入外部图片。
示例代码
以下是一个简单的SVG示例，展示了如何使用线性渐变和环形渐变：
<svg width="120" height="240"> <defs> <linearGradient id="Gradient1"> <stop offset="0%" stopcolor="red"/> <stop offset="50%" stopcolor="black" stopopacity="0"/> <stop offset="100%" stopcolor="blue"/> </linearGradient> <radialGradient id="Gradient2" cx="50%" cy="50%" r="50%" fx="25%" fy="25%"> <stop offset="0%" stopcolor="red"/> <stop offset="100%" stopcolor="blue"/> </radialGradient> </defs> <rect x="10" y="10" width="100" height="100" fill="url(#Gradient1)"/> <circle cx="70" cy="70" r="50" fill="url(#Gradient2)"/> </svg>
常见问题解答
1、如何在SVG中使用外部图片作为图案填充？
答案：可以使用<image>元素在<pattern>内引入外部图片。
```html
<pattern id="image" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="path/to/image.jpg" x="0" y="0" width="100" height="100"/>
</pattern>
<rect fill="url(#image)"/>
```
2、如何设置渐变的方向？
答案：对于线性渐变，可以通过x1,y1,x2,y2属性设置两个点来定义渐变的方向，默认情况下，渐变方向是从左到右（水平方向）。
```html
<linearGradient id="Gradient" x1="0%" y1="0%" x2="100%" y2="0%">
...
</linearGradient>
```
通过掌握这些颜色表示和定义方式，可以在SVG中创造出丰富多彩的视觉效果。
HTML5 SVG 2D 入门系列教程之五：颜色的表示及定义方式
1. 引言
在SVG中，颜色的表示和定义是图形绘制的基础之一，本教程将详细介绍SVG中颜色的表示方法以及如何定义颜色。
2. 颜色模型
SVG支持多种颜色模型，包括：
RGB：通过红(R)、绿(G)、蓝(B)三个颜色通道的组合来表示颜色。
RGBA：与RGB类似，但增加了Alpha通道，用于表示颜色的透明度。
HSL：通过色相(Hue)、饱和度(Saturation)和亮度(Lightness)来表示颜色。
HSLA：与HSL类似，但增加了Alpha通道。
3. 颜色表示方式
SVG中颜色的表示方式主要有以下几种：
3.1. 颜色单词
SVG定义了一系列颜色单词，可以直接使用这些单词来表示颜色，如red、blue、green等。
<circle cx="50" cy="50" r="40" fill="red" />
3.2. 颜色十六进制
使用六位十六进制数表示颜色，格式为#RRGGBB。
<circle cx="50" cy="50" r="40" fill="#FF0000" />
3.3. RGB颜色值
使用RGB颜色值表示颜色，格式为rgb(r, g, b)。
<circle cx="50" cy="50" r="40" fill="rgb(255, 0, 0)" />
3.4. RGBA颜色值
使用RGBA颜色值表示颜色，格式为rgba(r, g, b, a)。
<circle cx="50" cy="50" r="40" fill="rgba(255, 0, 0, 0.5)" />
3.5. HSL颜色值
使用HSL颜色值表示颜色，格式为hsl(h, s%, l%)。
<circle cx="50" cy="50" r="40" fill="hsl(0, 100%, 50%)" />
3.6. HSLA颜色值
使用HSLA颜色值表示颜色，格式为hsla(h, s%, l%, a)。
<circle cx="50" cy="50" r="40" fill="hsla(0, 100%, 50%, 0.5)" />
4. 颜色定义
在SVG中，可以使用<defs>元素来定义颜色，然后在图形中使用这些定义好的颜色。
<svg width="100" height="100"> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stopcolor:rgb(255,0,0);stopopacity:1" /> <stop offset="100%" style="stopcolor:rgb(0,0,255);stopopacity:1" /> </linearGradient> </defs> <rect width="100" height="100" fill="url(#gradient)" /> </svg>
5. 归纳
SVG提供了丰富的颜色表示和定义方式，使得开发者可以轻松地为图形添加各种颜色效果，掌握这些颜色表示方法，可以帮助你更灵活地设计和绘制SVG图形。
6. 参考资料
[SVG 1.1 Specification](https://www.w3.org/TR/SVG11/)
[SVG Color](https://www.w3.org/TR/SVG/types.html#Color)
希望以上内容能够帮助你更好地理解SVG中颜色的表示及定义方式。
