Helpful resources ▼
  Download   Pricing   Buy

SVG 颜色 – fill、stroke、透明度和颜色代码

SVG 颜色控制形状、paths、线条和文本的绘制方式。你可以通过 fill、stroke、不透明度属性、CSS styles、命名颜色、HEX、RGB、HSL、渐变和图案来设置颜色。本教程解释核心 SVG 颜色规则，并展示相同颜色值在常见 SVG 元素上的行为。

快速回答： 在 SVG 中，使用 fill 设置形状、paths 和文本的内部颜色，使用 stroke 设置轮廓和线条颜色，使用 opacity、fill-opacity 或 stroke-opacity 设置透明度。颜色值可以是命名颜色、HEX、RGB/RGBA、HSL/HSLA，或指向渐变和图案的 url(#id) 引用。

1<circle cx="50" cy="50" r="40" fill="#3498db" stroke="#1f4f72" stroke-width="4" />

本文将学习： 使用 fill 和 stroke 设置 SVG 颜色，选择颜色代码格式，为形状、paths 和文本着色，并避免常见 SVG 颜色错误。

SVG 颜色如何工作

在 SVG 中，给元素上色称为 painting。Paint 决定元素如何渲染，可以应用 fill、stroke 或两者。它们分别控制形状、paths 和文本的内部区域与轮廓。

SVG 支持两种常见颜色定义方式：

两种方式都参与 CSS cascade 和 inheritance 规则，但优先级不同。fill="red" 这样的 presentation attribute 易读易改，而 inline style declaration 通常会覆盖同一 property 的 presentation attribute。更深入的 C# 与 SVG 样式指南，请参见 SVG CSS vs Inline Styles vs Presentation Attributes。

Fill 和 Stroke 说明

SVG 使用两个核心 properties 应用颜色：

Property影响对象默认行为
fill形状或闭合 path 的内部区域默认为 black
stroke形状、线条或文本的轮廓默认不渲染

一个形状可以单独使用其中任意一个，也可以同时使用。例如，圆可以有彩色填充和可见描边，而 <line> 元素只能通过 stroke 绘制。闭合形状如 <circle>、<rect> 和 <polygon> 同时支持 fill 和 stroke。

SVG 颜色值规则

SVG 解析颜色值时有几个重要规则：

SVG 颜色代码 – HEX、RGB、HSL 和名称

快速摘要

  • HEX – 适合静态 SVG 图形的紧凑颜色格式。
  • RGB/RGBA – 适合程序化颜色控制和动态透明度。
  • HSL/HSLA – 更适合设计任务和系统化颜色变化。

颜色可以用多种方式表达。最佳格式取决于颜色是否需要可读、紧凑、便于从代码生成，或包含部分透明度。

颜色格式最适合示例
Named color简单可读的示例和原型fill="green"
HEX图标和插图中的紧凑稳定颜色fill="#00FF00"
RGB来自红、绿、蓝通道的程序化颜色值fill="rgb(0,255,0)"
RGBA颜色和透明度在同一个值中fill="rgba(0,255,0,0.6)"
HSL适合按 hue、saturation、lightness 调整设计颜色fill="hsl(120,100%,50%)"
HSLAHSL 颜色加透明度fill="hsla(120,100%,50%,0.6)"
url(#id)<defs> 中定义的渐变和图案fill="url(#grad1)"

SVG 颜色代码示例

下面的示例使用同一个圆，仅比较颜色语法。每一行都用不同颜色格式设置绿色 fill 和红色 stroke。

1<circle cx="50" cy="50" r="40" fill="green" stroke="red" />
2<circle cx="50" cy="50" r="40" fill="#00FF00" stroke="#FF0000" />
3<circle cx="50" cy="50" r="40" fill="rgb(0,255,0)" stroke="rgb(255,0,0)" />
4<circle cx="50" cy="50" r="40" fill="rgba(0,255,0,0.6)" stroke="rgba(255,0,0,0.8)" />
5<circle cx="50" cy="50" r="40" fill="hsl(120,100%,50%)" stroke="hsl(0,100%,50%)" />
6<circle cx="50" cy="50" r="40" fill="hsla(120,100%,50%,0.6)" stroke="hsla(0,100%,50%,0.8)" />

提示：

  • 需要透明度时，优先使用 RGBA/HSLA，或使用专门的 fill-opacity 和 stroke-opacity 属性。
  • 需要实用的命名颜色参考时，请查看 HTML Color Names 文章。

如何设置 SVG 颜色

  1. 选择目标 SVG 元素，例如 <circle>、<path>、<line>、<polygon> 或 <text>。
  2. 使用 fill 设置闭合形状、paths 和文本的内部颜色。
  3. 使用 stroke 和 stroke-width 设置轮廓和线条颜色。
  4. 选择颜色格式：命名颜色、HEX、RGB/RGBA、HSL/HSLA，或用于渐变和图案的 url(#id)。
  5. 需要透明度时，使用 fill-opacity、stroke-opacity、RGBA 或 HSLA。
  6. 检查默认值：缺少 fill 会变成黑色，缺少 stroke 则不会绘制轮廓。

Online SVG Color Converter

当你需要在 SVG fill、stroke、style 或 gradient stop 中放入精确颜色值时，可以使用在线颜色转换器。例如，可以把品牌 RGB 颜色转换为更紧凑的 HEX 标记，或把 HEX 转换为 HSL，以便更可预测地调整 hue、saturation 或 lightness。转换器不会直接编辑 SVG 文件；你需要把转换后的值复制到相应的 SVG 属性或 CSS declaration 中。

为 SVG 形状着色

SVG Circle Color

圆是最简单的 SVG 形状之一，非常适合演示颜色。通过修改 fill 和 stroke properties，可以控制圆的内部颜色、轮廓颜色，或同时控制两者。

下面的示例绘制多个圆，展示从默认版本到自定义 fill 与 stroke 组合的不同颜色配置。

1<svg height="200" width="700" xmlns="http://www.w3.org/2000/svg">
2  <circle cx="70"  cy="70" r="50" />
3  <circle cx="200" cy="70" r="50" fill="#79C99E" />
4  <circle cx="330" cy="70" r="50" fill="#79C99E" stroke="#508484" stroke-width="10" />
5  <circle cx="460" cy="70" r="50" fill="#79C99E" stroke-width="10" />
6  <circle cx="590" cy="70" r="50" fill="none" stroke="#508484" stroke-width="10" />
7</svg>

在这个示例中：

展示 fill 和 stroke 组合的 SVG 圆形

SVG Line 和 Polyline Color

与闭合形状不同，SVG 中的线和折线主要由轮廓定义。因此它们特别适合演示 stroke property 如何控制颜色、粗细和可见性。

下面的示例比较简单 <line> 元素和 <polyline> 元素，展示 stroke color、stroke weight 和 fill 在不同场景下的行为。

1<svg height="400" width="700" xmlns="http://www.w3.org/2000/svg">
2    <line x1="30" y1="30" x2="30" y2="300" style="stroke:#4387be; stroke-width:10" />
3    <line x1="55" y1="27" x2="130" y2="300" style="stroke:#c4456d; stroke-width:10" />
4    <line x1="80" y1="20" x2="250" y2="300" style="stroke:#77bec1; stroke-width:10" />
5    <polyline points="300,100 360,50 420,100 480,50 540,100 600,50 660,100" style="fill:none; stroke:#fb6796; stroke-width:5" />
6    <polyline points="300,200 360,150 420,200 480,150 540,200 600,150 660,200" style="fill:#c9d7e1; stroke:#fb6796; stroke-width:5" />
7    <polyline points="300,300 360,250 420,300 480,250 540,300 600,250 660,300" style="stroke:#fb6796; stroke-width:5" />
8</svg>

在这个示例中：

三条 SVG 线和三条折线，展示 stroke、fill 及混合颜色行为

SVG Polyline 和 Polygon Color

Polyline 和 polygon 看起来相似，但着色行为不同。关键区别是 polyline 是开放形状，而 polygon 始终闭合。

下面的示例使用相同的 fill 和 stroke 值，清楚展示 SVG 如何处理开放和闭合形状的颜色。

1<svg height="400" width="500" xmlns="http://www.w3.org/2000/svg">
2    <polyline points="60,290 130,20 200,290" style="fill:#86a9b9; stroke-width:5; stroke:#fb6796" />
3    <polygon points="260,290 330,20 400,290" style="fill:#86a9b9; stroke-width:5; stroke:#fb6796" />
4</svg>

两个形状使用相同的 fill 和 stroke 值，因此更容易看出它们的差异：

使用相同 fill 和 stroke 的 polyline 开放形状与 polygon 闭合形状

SVG Path Color

Paths 是 SVG 中最灵活的元素，可以描述开放轮廓，也可以描述闭合形状。因此它们的颜色行为取决于 path 是否形成闭合区域。

下面的示例两次使用相同 path data，展示显式禁用 fill 与应用 fill 时的差异。

 1<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
 2  <!-- Unfilled path -->
 3  <path d="M150,50 L150,300 M120,100 L150,50 L180,100
 4           M110,150 L150,90 L190,150 M90,220 L150,130 L210,220
 5           M70,300 L150,190 L230,300 M110,310 L150,240 L190,310"
 6        stroke="#a06e84" stroke-width="3" fill="none" />
 7  <!-- Filled path -->
 8  <path d="M150,50 L150,300 M120,100 L150,50 L180,100
 9           M110,150 L150,90 L190,150 M90,220 L150,130 L210,220
10           M70,300 L150,190 L230,300 M110,310 L150,240 L190,310"
11        stroke="#a06e84" stroke-width="3" fill="#74aeaf" transform="translate(200)" />
12</svg>

下图展示 fill="none" 和 fill="#74aeaf" 的显示差异：

比较 fill none 和填充 path 颜色的两个 SVG paths

SVG Text Color

与其他 SVG 形状一样，文本也可以同时设置 stroke 和 fill。下面的代码示例展示如何设置文本的 fill color、stroke color，并使用渐变作为 fill。如果未指定 fill 属性，SVG 文本默认显示为黑色：

 1<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
 4            <stop offset="10%" style="stop-color:lightsalmon" />
 5            <stop offset="50%" style="stop-color:teal" />
 6            <stop offset="90%" style="stop-color:lightpink" />
 7        </linearGradient>
 8    </defs>
 9    <text x="50" y="50" font-family="arial" font-size="40" >How to add SVG text color?</text>
10    <text x="50" y="130" font-family="arial" font-size="40" fill="lightpink" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
11    <text x="50" y="210" font-family="arial" font-size="40" fill="none" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
12    <text x="50" y="290" font-family="arial" font-size="40" fill="url(#grad1)" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
13</svg>

下图展示为文本添加颜色时 fill 和 stroke 的不同情况：

SVG 文本示例，展示默认 fill、fill 加 stroke、轮廓文本和渐变 fill

你可以在 SVG 中的填充和描边 和 SVG 渐变 中进一步了解如何设置文本样式。

SVG 不透明度和透明颜色

不透明度决定 SVG 元素的透明程度，以及它如何与后方元素视觉混合。在 SVG 中，透明度可以直接写在颜色值中，也可以使用专门的透明度 properties。下面的示例比较三种常见透明度方式，并展示它们对最终显示的影响。

 1<svg height="200" width="1250" xmlns="http://www.w3.org/2000/svg">
 2  <rect x="310" y="30" width="100" height="100" fill="rgba(0,50,255,0.8)" />
 3  <rect x="250" y="50" width="110" height="100" fill="rgba(0,50,255,0.7)" />
 4  <rect x="170" y="90" width="110" height="100" fill="rgba(0,50,255,0.6)" />
 5  <rect x="100" y="50" width="110" height="100" fill="rgba(0,50,255,0.4)" />
 6  <rect x="50"  y="30" width="110" height="100" fill="rgba(0,50,255,0.2)" />
 7
 8  <rect x="710" y="30" width="100" height="100" fill="hsla(0,100%,50%,0.8)" />
 9  <rect x="650" y="50" width="110" height="100" fill="hsla(0,100%,50%,0.7)" />
10  <rect x="570" y="90" width="110" height="100" fill="hsla(0,100%,50%,0.6)" />
11  <rect x="500" y="50" width="110" height="100" fill="hsla(0,100%,50%,0.4)" />
12  <rect x="450" y="30" width="110" height="100" fill="hsla(0,100%,50%,0.2)" />
13
14  <rect x="1110" y="30" width="100" height="100" fill="#C1B900" fill-opacity="0.8" />
15  <rect x="1050" y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.7" />
16  <rect x="970"  y="90" width="110" height="100" fill="#C1B900" fill-opacity="0.6" />
17  <rect x="900"  y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.4" />
18  <rect x="850"  y="30" width="110" height="100" fill="#C1B900" fill-opacity="0.2" />
19</svg>

在这个示例中：

三组 SVG 矩形，展示 RGBA、HSLA 以及 HEX 加 fill-opacity

Common Mistakes and Fixes

下面这些问题是 SVG 颜色行为异常的常见原因。

问题原因修复方法
Stroke 不可见设置了 stroke-width，但缺少 stroke 颜色添加 stroke 值，例如 stroke="#d80539" stroke-width="4"
形状显示为黑色而不是透明省略 fill，SVG 使用默认黑色 fill只需要轮廓时使用 fill="none"
颜色值被忽略颜色字符串格式错误或不受支持使用有效的命名颜色、3 位或 6 位 HEX、RGB/RGBA 或 HSL/HSLA
不透明度无效HEX 颜色本身不包含透明度使用 RGBA、HSLA、fill-opacity 或 stroke-opacity
CSS 颜色没有应用Inline style 或更具体的 CSS rule 覆盖它检查 computed styles，并移除或更新冲突的 style、fill、stroke 或 CSS rule

提示： 如果颜色没有按预期渲染，请在浏览器开发者工具中打开 SVG。缺少命名空间 (xmlns) 或小的语法错误，常常会阻止颜色正确显示。

Quick SVG Color Recipes

目标代码片段
为形状着色<circle cx="50" cy="50" r="40" fill="#E74C3C" />
让形状半透明<rect width="100" height="100" fill="rgba(0,155,0,0.5)" />
同时使用 fill 和 stroke<polygon points="30,90 90,90 60,20" fill="#3498DB" stroke="#1B4F72" stroke-width="4" />
只应用 stroke<line x1="0" y1="0" x2="100" y2="0" stroke="#ff6600" stroke-width="2" />

FAQ – SVG 颜色

应该使用哪种 SVG 颜色格式？

静态图形优先使用 HEX；颜色来自代码或需要 alpha 透明度时使用 RGB/RGBA；需要调整 hue、saturation 或 lightness 时使用 HSL/HSLA。命名颜色适合简单示例，但在生产 SVG 中，HEX 或 RGB 通常更明确。

如何让 SVG 颜色透明？

使用 rgba() 或 hsla() 颜色值，或者保持颜色值独立并添加 fill-opacity 或 stroke-opacity。只有当整个元素都需要透明时才使用 opacity。

可以用 CSS 设置 SVG 颜色吗？

可以。可以通过 inline styles、style blocks 或 external CSS，使用 fill、stroke 及相关 properties 设置 SVG 颜色。Inline style 和 presentation attributes 可能覆盖更广泛的 CSS rules。

为什么我的 SVG 形状变成黑色？

如果未指定 fill，SVG 会默认把闭合形状填充为黑色。只需要轮廓时添加 fill="none"，或设置明确的填充颜色。

SVG 可以使用 HEX、RGB 和 HSL 颜色值吗？

可以。SVG 接受命名颜色、HEX、RGB/RGBA、HSL/HSLA，以及 url(#gradient-id) 等 paint references。需要透明色时使用 RGBA、HSLA 或透明度属性。

为什么 fill 不能改变 SVG 线条颜色？

<line> 元素没有内部区域，因此 fill 不会让它可见。SVG 线条、折线、轮廓和开放 paths 应使用 stroke。

SVG 可以把渐变当作颜色使用吗？

可以。使用 fill="url(#gradient-id)" 或 stroke="url(#gradient-id)"，应用在 SVG <defs> 部分定义的渐变。

如何以编程方式更改 SVG 颜色？

使用 SVG DOM 工作流：加载文件，选择目标元素，更新 fill、stroke、style 或 gradient stop 值，然后保存文档。请参见 How to Change SVG Color 获取聚焦颜色示例；当颜色由 inline styles、CSS rules 或更广泛的样式规范化控制时，参见 Modify SVG Styles Programmatically in C#。Python via .NET 示例请参见 Change SVG Colors in Python。

规范和相关资源

需要混合两种颜色并预览结果时，可以使用免费的在线 Color Mixer。

Color Mixer Web 应用横幅

SVG 中的填充和描边 SVG 背景颜色