在SVG中，fill和stroke属性是用来控制图形的填充和描边的。下面我将分别详细介绍这两个属性及它们的衍生属性。
Fill 属性（填充）
应用场景
- 绘制实心图形：如圆形、矩形、多边形等的内部填充。用于表示实体对象、区域等，比如用特定颜色填充一个图标来突出显示。
- 创建图案和纹理：通过复杂的路径组合和填充，可以创建具有独特纹理和图案的元素，用于装饰或背景。
- 突出显示特定区域：如在地图中填充不同颜色来表示不同的地区或状态。
- 表示数据可视化中的分类：例如用不同颜色的填充来区分不同类型的数据点或数据区域。
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 （描边）
应用场景
- 强调图形轮廓：使图形更加清晰和突出，如给图标或形状添加描边，增强视觉辨识度。
- 指示边界或范围：例如在图表中用描边来界定某个数据范围或区域边界。
- 创建装饰效果：如给线条、路径添加华丽的描边来增加艺术感和装饰性。
- 模拟实物的边缘：比如在绘制一个类似实物的图形时，通过合适的描边来表现其轮廓特征。
- 在交互设计中：当元素被选中或处于特定状态时，可以改变描边的颜色、宽度等属性来提供反馈。
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>
