8. SVG的填充和描边

在SVG中，fill和stroke属性是用来控制图形的填充和描边的。下面我将分别详细介绍这两个属性及它们的衍生属性。

Fill 属性（填充）

应用场景

1. 绘制实心图形：如圆形、矩形、多边形等的内部填充。用于表示实体对象、区域等，比如用特定颜色填充一个图标来突出显示。
2. 创建图案和纹理：通过复杂的路径组合和填充，可以创建具有独特纹理和图案的元素，用于装饰或背景。
3. 突出显示特定区域：如在地图中填充不同颜色来表示不同的地区或状态。
4. 表示数据可视化中的分类：例如用不同颜色的填充来区分不同类型的数据点或数据区域。

fill属性定义了元素内部的颜色。以下是fill属性的一些衍生属性：

• fill-opacity: 定义填充颜色的不透明度。
• fill-rule: 定义填充区域的算法，通常有nonzero和evenodd两个值。

<!-- fill 示例 -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 使用 fill 设置矩形的填充颜色 -->
  <rect width="100" height="100" fill="blue" />
  <!-- 使用 fill-opacity 设置填充颜色的不透明度 -->
  <circle cx="50" cy="50" r="40" fill="red" fill-opacity="0.5" />
  <!-- 使用 fill-rule 设置填充区域的算法 -->
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="green" fill-rule="evenodd" />
</svg>

Stroke （描边）

应用场景

1. 强调图形轮廓：使图形更加清晰和突出，如给图标或形状添加描边，增强视觉辨识度。
2. 指示边界或范围：例如在图表中用描边来界定某个数据范围或区域边界。
3. 创建装饰效果：如给线条、路径添加华丽的描边来增加艺术感和装饰性。
4. 模拟实物的边缘：比如在绘制一个类似实物的图形时，通过合适的描边来表现其轮廓特征。
5. 在交互设计中：当元素被选中或处于特定状态时，可以改变描边的颜色、宽度等属性来提供反馈。

stroke属性定义了元素描边的颜色。以下是stroke属性的一些衍生属性：

• stroke-width: 定义描边的宽度。
• stroke-opacity: 定义描边颜色的不透明度。
• stroke-linecap: 定义线条末端的形状，可以是butt、round或square。
• stroke-linejoin: 定义线条相交处的形状，可以是miter、round或bevel。
• stroke-dasharray: 定义描边的虚线模式。
• stroke-dashoffset: 定义虚线模式的起始偏移量。

<!-- stroke 示例 -->
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 使用 stroke 设置线条的颜色 -->
  <line x1="10" y1="10" x2="190" y2="10" stroke="black" />
  <!-- 使用 stroke-width 设置线条的宽度 -->
  <line x1="10" y1="30" x2="190" y2="30" stroke="black" stroke-width="5" />
  <!-- 使用 stroke-opacity 设置线条颜色的不透明度 -->
  <line x1="10" y1="50" x2="190" y2="50" stroke="black" stroke-opacity="0.5" />
  <!-- 使用 stroke-linecap 设置线条末端的形状 -->
  <line x1="10" y1="70" x2="190" y2="70" stroke="black" stroke-linecap="round" />
  <!-- 使用 stroke-dasharray 和 stroke-dashoffset 设置虚线模式 -->
  <line x1="10" y1="90" x2="190" y2="90" stroke="black" stroke-dasharray="5, 5" stroke-dashoffset="5" />
</svg>