前端必知必会，CSS之SVG篇五：必会填充与描边

2023-09-29 13:27:56

SVG中填充与描边的使用

在上一篇文章中，我们学习了如何使用SVG中最强大的path路径进行图形绘制。在之前的一些例子中我们在绘制图形时使用了一些属性，例如stroke、fill，今天本篇将详细讲讲这些属性是怎么使用的。

填充

fill属性用于设置图形的填充色。fill属性可以设置为颜色值，也可以设置为渐变色或图案。

如果fill属性设置为颜色值，则图形将被填充为该颜色。例如：

<svg width="100" height="100">
  <path fill="red" d="M 0 0 L 100 0 L 50 100 Z" />
</svg>

如果fill属性设置为渐变色，则图形将被填充为渐变色。渐变色可以是线性的或径向的。例如：

<svg width="100" height="100">
  <path fill="url(#gradient)" d="M 0 0 L 100 0 L 50 100 Z" />
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
</svg>

如果fill属性设置为图案，则图形将被填充为图案。图案可以是图像文件或SVG代码。例如：

<svg width="100" height="100">
  <path fill="url(#pattern)" d="M 0 0 L 100 0 L 50 100 Z" />
  <defs>
    <pattern id="pattern" width="10" height="10">
      <rect width="10" height="10" fill="red" />
      <rect width="10" height="10" fill="blue" x="5" y="5" />
    </pattern>
  </defs>
</svg>

描边

stroke属性用于设置图形的描边。stroke属性可以设置为颜色值、渐变色或图案。

如果stroke属性设置为颜色值，则图形将被描边为该颜色。例如：

<svg width="100" height="100">
  <path stroke="red" stroke-width="5" d="M 0 0 L 100 0 L 50 100 Z" />
</svg>

如果stroke属性设置为渐变色，则图形将被描边为渐变色。渐变色可以是线性的或径向的。例如：

<svg width="100" height="100">
  <path stroke="url(#gradient)" stroke-width="5" d="M 0 0 L 100 0 L 50 100 Z" />
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
</svg>

如果stroke属性设置为图案，则图形将被描边为图案。图案可以是图像文件或SVG代码。例如：

<svg width="100" height="100">
  <path stroke="url(#pattern)" stroke-width="5" d="M 0 0 L 100 0 L 50 100 Z" />
  <defs>
    <pattern id="pattern" width="10" height="10">
      <rect width="10" height="10" fill="red" />
      <rect width="10" height="10" fill="blue" x="5" y="5" />
    </pattern>
  </defs>
</svg>