CSS 使用 CSS 变量填充 SVG

在本文中，我们将介绍如何使用 CSS 变量在 SVG 中设置填充颜色。SVG（可缩放矢量图形）是一种用于描述二维图形和动画的 XML 格式，它可以通过 CSS 进行样式化。而 CSS 变量是一种用于存储和重用值的工具。

阅读更多：CSS 教程

什么是 SVG？

SVG 是一种使用 XML 描述二维图形和动画的语言。它可以定义图形的形状、位置和颜色。SVG 是矢量图形，因此它可以无限缩放而不失去细节。与位图不同，SVG 图形是基于数学的，这意味着它可以通过修改属性来进行动画和交互。

在 CSS 中使用 SVG

要在 CSS 中使用 SVG，我们可以使用 background-image 属性或 url() 函数，将 SVG 文件作为背景图像的来源。可以通过设置 width 和 height 属性来控制 SVG 图像的尺寸。在 SVG 中使用 CSS 的一个强大之处在于我们可以使用 CSS 样式化 SVG 的各个元素，包括填充颜色。

使用 CSS 变量设置填充颜色

CSS 变量是一种用于存储和重用值的机制。它们以 -- 开头，后跟变量的名称和值。要在 SVG 中使用 CSS 变量设置填充颜色，我们可以将变量的值设置为 SVG 元素的 fill 属性。下面是一个示例：

<svg width="100" height="100">
  <rect x="0" y="0" width="100" height="100" style="--color: red;"></rect>
</svg>

在上面的示例中，我们定义了一个变量 --color，并将其值设置为红色。然后，我们将这个变量作为 fill 属性的值，用于设置 rect 元素的填充颜色。

使用 CSS 变量进行动态填充

一个很有用的特性是我们可以在 CSS 中使用 JavaScript 动态修改变量的值。这意味着我们可以通过修改变量的值来动态更改 SVG 元素的填充颜色。下面是一个示例：

<svg width="100" height="100">
  <rect x="0" y="0" width="100" height="100" style="--color: var(--primary-color);"></rect>
</svg>
<button onclick="changeColor()">Change Color</button>

<script>
  function changeColor() {
    document.documentElement.style.setProperty('--primary-color', 'blue');
  }
</script>