填充与描边

填充和描边是 SVG 图形最基本的样式属性。填充定义图形内部的颜色或图案，描边定义图形轮廓的样式。理解这两个属性是创建美观 SVG 图形的基础。

填充属性

fill - 填充颜色

fill 属性定义图形内部的颜色。可以使用颜色名称、十六进制值、RGB 或 RGBA 值。

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" fill="red"/>
  <rect x="110" y="10" width="80" height="80" fill="#3498db"/>
  <rect x="210" y="10" width="80" height="80" fill="rgb(46, 204, 113)"/>
</svg>

颜色格式：

格式	示例	说明
颜色名称	`red`	预定义的 147 种颜色名
十六进制	`#3498db`	6 位十六进制值
短十六进制	`#abc`	等价于 `#aabbcc`
RGB	`rgb(255, 0, 0)`	红、绿、蓝值 (0-255)
RGBA	`rgba(255, 0, 0, 0.5)`	带透明度的 RGB
HSL	`hsl(120, 100%, 50%)`	色相、饱和度、亮度
currentColor	`currentColor`	继承当前文本颜色

fill-opacity - 填充透明度

fill-opacity 属性单独控制填充的透明度，值为 0（完全透明）到 1（完全不透明）。

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" fill="#e74c3c" fill-opacity="1"/>
  <rect x="110" y="10" width="80" height="80" fill="#e74c3c" fill-opacity="0.5"/>
  <rect x="210" y="10" width="80" height="80" fill="#e74c3c" fill-opacity="0.2"/>
</svg>

fill="none" - 无填充

设置 fill="none" 或 fill="transparent" 可以取消填充，只显示描边。

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="50" r="40" fill="none" stroke="#3498db" stroke-width="3"/>
</svg>

描边属性

stroke - 描边颜色

stroke 属性定义图形轮廓的颜色，支持与 fill 相同的颜色格式。

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" fill="none" stroke="red" stroke-width="3"/>
  <rect x="110" y="10" width="80" height="80" fill="none" stroke="#3498db" stroke-width="3"/>
  <rect x="210" y="10" width="80" height="80" fill="none" stroke="rgb(46, 204, 113)" stroke-width="3"/>
</svg>

stroke-width - 描边宽度

stroke-width 定义描边的粗细，默认值为 1。可以使用像素或其他长度单位。

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <line x1="20" y1="50" x2="280" y2="50" stroke="#2c3e50" stroke-width="1"/>
  <line x1="20" y1="60" x2="280" y2="60" stroke="#2c3e50" stroke-width="3"/>
  <line x1="20" y1="75" x2="280" y2="75" stroke="#2c3e50" stroke-width="6"/>
</svg>

stroke-opacity - 描边透明度

stroke-opacity 单独控制描边的透明度。

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" fill="none" stroke="#9b59b6" stroke-width="5" stroke-opacity="1"/>
  <rect x="110" y="10" width="80" height="80" fill="none" stroke="#9b59b6" stroke-width="5" stroke-opacity="0.5"/>
  <rect x="210" y="10" width="80" height="80" fill="none" stroke="#9b59b6" stroke-width="5" stroke-opacity="0.2"/>
</svg>

描边样式

stroke-linecap - 线端样式

stroke-linecap 定义开放路径端点的样式。

值	效果
butt（默认）	平直边缘，不延伸
round	圆形端点
square	方形端点，延伸半个描边宽度

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <line x1="20" y1="30" x2="280" y2="30" stroke="#e74c3c" stroke-width="15" stroke-linecap="butt"/>
  <line x1="20" y1="75" x2="280" y2="75" stroke="#3498db" stroke-width="15" stroke-linecap="round"/>
  <line x1="20" y1="120" x2="280" y2="120" stroke="#2ecc71" stroke-width="15" stroke-linecap="square"/>
</svg>

stroke-linejoin - 拐角样式

stroke-linejoin 定义两条线段连接处的样式。

值	效果
miter（默认）	尖角
round	圆角
bevel	斜角

<svg width="300" height="120" xmlns="http://www.w3.org/2000/svg">
  <polyline points="20,100 60,20 100,100" fill="none" stroke="#e74c3c" stroke-width="10" stroke-linejoin="miter"/>
  <polyline points="120,100 160,20 200,100" fill="none" stroke="#3498db" stroke-width="10" stroke-linejoin="round"/>
  <polyline points="220,100 260,20 300,100" fill="none" stroke="#2ecc71" stroke-width="10" stroke-linejoin="bevel"/>
</svg>

stroke-miterlimit - 尖角限制

当 stroke-linejoin="miter" 时，尖角可能变得非常长。stroke-miterlimit 限制尖角长度与描边宽度的最大比值，超过则转为 bevel。

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <polyline points="20,90 50,10 80,90" fill="none" stroke="#34495e" stroke-width="10" stroke-linejoin="miter" stroke-miterlimit="10"/>
  <polyline points="120,90 150,10 180,90" fill="none" stroke="#34495e" stroke-width="10" stroke-linejoin="miter" stroke-miterlimit="2"/>
</svg>

stroke-dasharray - 虚线模式

stroke-dasharray 定义虚线和间隙的模式，值为一组用逗号分隔的数字。

<svg width="300" height="120" xmlns="http://www.w3.org/2000/svg">
  <line x1="20" y1="30" x2="280" y2="30" stroke="#1abc9c" stroke-width="3" stroke-dasharray="10,5"/>
  <line x1="20" y1="60" x2="280" y2="60" stroke="#1abc9c" stroke-width="3" stroke-dasharray="10,5,2,5"/>
  <line x1="20" y1="90" x2="280" y2="90" stroke="#1abc9c" stroke-width="3" stroke-dasharray="20,10,5,5,5,10"/>
</svg>

10,5：实线 10px，间隙 5px，循环重复
10,5,2,5：实线 10px，间隙 5px，实线 2px，间隙 5px，循环重复

stroke-dashoffset - 虚线偏移

stroke-dashoffset 定义虚线模式的起始偏移量，可以创建动画效果。

<svg width="300" height="80" xmlns="http://www.w3.org/2000/svg">
  <line x1="20" y1="30" x2="280" y2="30" stroke="#8e44ad" stroke-width="3" stroke-dasharray="10,5" stroke-dashoffset="0"/>
  <line x1="20" y1="60" x2="280" y2="60" stroke="#8e44ad" stroke-width="3" stroke-dasharray="10,5" stroke-dashoffset="7.5"/>
</svg>

描边绘制顺序

描边以路径为中心线绘制，一半在路径内侧，一半在外侧。这可能导致描边与填充重叠。

paint-order - 绘制顺序

paint-order 属性控制填充、描边和标记的绘制顺序。

值	效果
normal（默认）	先填充，再描边，最后标记
stroke fill	先描边，再填充
fill stroke	先填充，再描边

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="50" y="60" font-size="40" fill="#e74c3c" stroke="#2c3e50" stroke-width="3" paint-order="normal">Normal</text>
  <text x="180" y="60" font-size="40" fill="#e74c3c" stroke="#2c3e50" stroke-width="3" paint-order="stroke">Stroke</text>
</svg>

当 paint-order="stroke" 时，描边先绘制，填充后绘制，填充会覆盖部分描边。

使用 CSS 设置样式

SVG 元素可以通过内联样式、内部样式表或外部样式表设置样式。

内联样式

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" 
        style="fill: #3498db; stroke: #2c3e50; stroke-width: 3"/>
</svg>

内部样式表

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    .my-rect {
      fill: #3498db;
      stroke: #2c3e50;
      stroke-width: 3;
    }
  </style>
  <rect x="10" y="10" width="80" height="80" class="my-rect"/>
</svg>

外部样式表

在 HTML 中引入外部 CSS 文件：

<link rel="stylesheet" href="styles.css">

.my-rect {
  fill: #3498db;
  stroke: #2c3e50;
  stroke-width: 3;
}

CSS 伪类

SVG 元素支持 CSS 伪类，可以创建交互效果：

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    .btn-rect {
      fill: #3498db;
      cursor: pointer;
      transition: fill 0.3s;
    }
    .btn-rect:hover {
      fill: #2980b9;
    }
  </style>
  <rect x="10" y="10" width="80" height="80" class="btn-rect"/>
</svg>

属性继承

SVG 中的许多样式属性可以继承父元素的值。

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <g fill="#e74c3c" stroke="#c0392b" stroke-width="2">
    <rect x="10" y="10" width="50" height="50"/>
    <circle cx="120" cy="35" r="25"/>
    <ellipse cx="180" cy="35" rx="30" ry="20"/>
  </g>
</svg>

<g> 元素上的样式会应用到所有子元素，除非子元素覆盖了该属性。

属性优先级

当同一属性在不同地方定义时，优先级从高到低：

内联 style 属性
内联属性（如 fill="#e74c3c"）
CSS 类选择器
父元素继承

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    .priority-demo {
      fill: #3498db;
    }
  </style>
  <g fill="#e74c3c">
    <rect x="10" y="10" width="50" height="50" class="priority-demo"/>
    <rect x="70" y="10" width="50" height="50" class="priority-demo" fill="#2ecc71"/>
    <rect x="130" y="10" width="50" height="50" class="priority-demo" style="fill: #9b59b6"/>
  </g>
</svg>

小结

填充和描边是 SVG 图形的基础样式。填充控制图形内部，描边控制图形轮廓。通过调整透明度、线端样式、拐角样式和虚线模式，可以创建丰富的视觉效果。SVG 样式可以通过属性或 CSS 设置，支持继承和优先级规则。

填充属性​

fill - 填充颜色​

fill-opacity - 填充透明度​

fill="none" - 无填充​

描边属性​

stroke - 描边颜色​

stroke-width - 描边宽度​

stroke-opacity - 描边透明度​

描边样式​

stroke-linecap - 线端样式​

stroke-linejoin - 拐角样式​

stroke-miterlimit - 尖角限制​

stroke-dasharray - 虚线模式​

stroke-dashoffset - 虚线偏移​

描边绘制顺序​

paint-order - 绘制顺序​

使用 CSS 设置样式​

内联样式​

内部样式表​

外部样式表​

CSS 伪类​

属性继承​

属性优先级​

小结​