SVG 填充不透明度属性

SVG 可缩放矢量图形（Scalable Vector Graphics）是一种基于 XML 格式的 2D 矢量图形标准。其中的填充不透明度属性可以控制一个形状的不透明度，使其不透明或半透明。在本文中，我们将介绍填充不透明度属性的用法和示例。

语法

SVG 的填充不透明度属性称为 fill-opacity，其语法如下：

<svg>
  <rect x="10" y="10" width="50" height="50" fill="#f00" fill-opacity="0.5" />
</svg>

上述代码中的 fill-opacity 属性被设置为 0.5，表示该矩形的填充颜色的不透明度为 50%。该属性的值可以从 0.0（全透明）到 1.0（完全不透明）。

示例

下面的例子展示了如何使用 fill-opacity 属性创建一个半透明的矩形。其中，矩形的填充颜色为红色，不透明度为 0.5。代码如下：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#f00" fill-opacity="0.5" />
</svg>

该代码将生成一个 100x100 像素的 SVG，其中嵌入了一个半透明的矩形。

注意事项

• 如果同时设置了 fill-opacity 属性和 opacity 属性，那么它们的效果将相乘，即 opacity * fill-opacity。
• fill-opacity 属性只适用于形状的填充颜色，而不适用于形状边界的颜色。

结论

本文介绍了 SVG 的填充不透明度属性 fill-opacity 的语法和用法。使用 fill-opacity 属性，您可以轻松地创建半透明的形状，使您的 SVG 更加丰富和有趣。