CSS中fill属性有哪些实用场景？

12 min read

在CSS中，fill通常用于SVG图形中的填充颜色。具体应用场景如下：

  1. 填充形状：使用fill属性来指定SVG形状的填充颜色，例如填充矩形、圆形等。
<svg width="300" height="100">
  <rect x="50" y="20" width="200" height="60" fill="#008080"></rect>
</svg>
  1. 填充路径：使用fill属性来指定SVG路径的填充颜色，例如填充曲线、复杂路径等。
<svg width="300" height="100">
  <path d="M20 80 C 40 10, 65 10, 85 80 S 150 150, 180 80" fill="#008080" stroke="none"></path>
</svg>

需要注意的是，如果SVG图形被设置为不透明（opacity: 1），那么填充颜色将完全覆盖下面的元素。可以通过设置opacity属性来控制SVG填充颜色的透明程度，以便下面的元素可以显示出来。