SVG 颜色 CSS - HTML 主题介绍

简介

SVG 是可缩放矢量图形（Scalable Vector Graphics）的缩写，是一种基于 XML 的图形格式，它能够用简单的标记语言来描述二维图形和相关信息。SVG 的优点在于图像可以无限缩放，且不会失真，因此在 Web 开发中得到了广泛应用。

在 SVG 中，我们可以通过 CSS 来控制图像的样式，并且可以在 HTML 中直接嵌入 SVG 代码。

SVG 颜色

SVG 中有两种颜色：

1. Stroke（描边颜色）：用于描绘图形边界的颜色
2. Fill（填充颜色）：用于填充图形内部的颜色

颜色可以是预定义的名称、十六进制 RGB 值、 RGB 函数、HSL 函数或者 SVG gradient 元素，具体如下：

预定义颜色

SVG 中有 16 个常用预定义颜色，它们是：

• aqua：亮蓝色
• black：黑色
• blue：蓝色
• fuchsia：紫红色
• gray：灰色
• green：绿色
• lime：绿黄色
• maroon：栗色
• navy：海军蓝
• olive：橄榄色
• orange：橙色
• purple：紫色
• red：红色
• silver：银色
• teal：水鸭色
• yellow：黄色

十六进制 RGB 值

颜色值也可以使用十六进制表示法，其中前两个字符表示红色（00-FF），中间两个字符表示绿色（00-FF），最后两个字符表示蓝色（00-FF）。

例如，#FF0000 表示纯红色，#00FF00 表示纯绿色，#0000FF 表示纯蓝色。

RGB 函数

RGB 函数用于指定颜色的红、绿、蓝三原色的值，并且取值范围都是 0 到 255。该函数的语法如下：

rgb(red, green, blue)

例如：

rgb(255, 0, 0) /* 红色 */
rgb(0, 255, 0) /* 绿色 */
rgb(0, 0, 255) /* 蓝色 */

HSL 函数

HSL 函数用于指定颜色的色相、饱和度和亮度。该函数的语法如下：

hsl(hue, saturation, lightness)

其中，色相取值范围为 0 到 360，饱和度和亮度都取值范围为 0%-100%。例如：

hsl(0, 100%, 50%) /* 红色 */
hsl(120, 100%, 50%) /* 绿色 */
hsl(240, 100%, 50%) /* 蓝色 */

SVG Gradient 元素

用于创建线性渐变或径向渐变。线性渐变沿直线从起点渐变到终点。径向渐变从中心点向四周渐变。

渐变元素如下：

• ：创建线性渐变
• ：创建径向渐变

渐变元素以及渐变的 colorstops 需要放在 SVG 中，关于 SVG Gradient 的详细内容可以查看 SVG Gradient 的官方文档。

CSS 中的 SVG 样式

在样式表中使用 SVG 样式时，需使用 stroke 或 fill 属性，例如：

svg rect {
  stroke: red;
  stroke-width: 2;
  fill: yellow;
}

在该示例中，所有矩形都将具有红色边框（描边），边框宽度为 2 个像素，且内部为黄色（填充）。

在 HTML 中引用 SVG

在 HTML 中引用 SVG 图像，需要在 HTML 中添加一个 <svg> 元素，并且通过 viewBox 属性指定 SVG 的尺寸。

例如：

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80"></rect>
</svg>

在该示例中，我们在 SVG 中添加了一个矩形，宽度为 80 个像素，高度为 80 个像素，且在画布上的坐标为 (10, 10)。注意，该 SVG 的视图框为 (0, 0, 100, 100)，因此这个 SVG 画布的大小为 100 个像素宽，100 个像素高。

总结

本文简单介绍了 SVG 的颜色、CSS 中的 SVG 样式以及在 HTML 中引用 SVG 图像的方法。开发人员可以通过这些知识来创建自己的 SVG 图像并通过样式控制 SVG 的外观。