SVG 样式属性介绍

SVG（可缩放矢量图形）是一种基于 XML 的图形格式，用于描述二维矢量图形。在 SVG 中，样式属性定义了图形的外观。本文将介绍一些常用的 SVG 样式属性，帮助程序员理解和掌握 SVG 样式的使用。

1. fill 属性

fill 属性定义了形状的填充颜色或图案。它可以接受多种值，如：

• 颜色值：使用颜色名称、RGB 值或十六进制颜色码指定填充颜色。
• 渐变：使用 linearGradient 或 radialGradient 定义的渐变。
• 图案：使用 pattern 定义的图案填充。

示例：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <rect x="0" y="0" width="100" height="100" fill="red" />
</svg>

2. stroke 属性

stroke 属性定义了形状的描边颜色。它的使用方式与 fill 类似，可以接受相同的值。

示例：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="blue" fill="none" />
</svg>

3. stroke-width 属性

stroke-width 属性定义了形状描边的宽度。它接受一个正数值，指定描边的粗细。

示例：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <rect x="10" y="10" width="80" height="80" stroke="black" fill="none" stroke-width="2" />
</svg>

4. opacity 属性

opacity 属性定义了形状的透明度。它接受一个从 0 到 1 的值，表示从完全透明到完全不透明的范围。

示例：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" opacity="0.5" />
</svg>

5. filter 属性

filter 属性定义了应用于形状的滤镜效果，例如模糊、颜色变换等。它可以接受使用标准滤镜效果定义的名称。

示例：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" filter="url(#filter1)" />
  <filter id="filter1">
    <feGaussianBlur stdDeviation="5" />
  </filter>
</svg>

以上是一些常用的 SVG 样式属性的介绍，它们可以用于定制和美化 SVG 图形的外观。通过合理运用这些属性，程序员可以创建出各种独特且精美的 SVG 图形。