怎样在SVG中使用css变量？

在 SVG 中使用 CSS 变量 (也称为 CSS 自定义属性) 的方法与在 HTML 中使用它们非常相似，但有一些细微的差别需要注意。 主要方法是通过 style 元素或内联样式来定义和使用变量。

方法一：使用 <style> 元素

这是推荐的方法，因为它可以更好地组织你的 CSS 代码，并提高可维护性。

<svg width="200" height="200">
  <style>
    :root {
      --main-color: blue;
      --text-color: white;
    }

    rect {
      fill: var(--main-color);
    }

    text {
      fill: var(--text-color);
    }
  </style>
  <rect x="10" y="10" width="100" height="100" />
  <text x="50" y="60" text-anchor="middle">Hello SVG</text>
</svg>

在这个例子中：

• :root 选择器定义了 CSS 变量的范围，它作用于整个 SVG 文档。
• var(--main-color) 和 var(--text-color) 引用了定义的变量。
• rect 和 text 元素使用了这些变量来设置填充颜色。

方法二：使用内联样式

你也可以直接在 SVG 元素中使用内联样式来定义和使用变量，但这通常不推荐，因为它会使代码难以维护和阅读。

<svg width="200" height="200">
  <rect style="fill: var(--main-color, red);" x="10" y="10" width="100" height="100" />
  <text style="fill: var(--text-color, black);" x="50" y="60" text-anchor="middle">Hello SVG</text>
</svg>
<style>
  :root {
    --main-color: blue;
    --text-color: white;
  }
</style>

这里需要注意的是，我们使用了 var(--main-color, red) 这种形式。 第二个参数 red 是一个回退值，如果变量 --main-color 没有定义，则会使用红色。

重要考虑事项:

• 作用域: 在 <style> 元素内定义的变量作用域是整个 SVG。 如果变量在内联样式中定义，则作用域仅限于该元素。
• 浏览器支持: 现代浏览器都支持 CSS 变量。
• 命名: 使用有意义的变量名，并遵循 CSS 的命名约定。
• 外部样式表: 你可以将 CSS 变量定义在一个外部 CSS 文件中，然后通过 <link> 元素将其链接到 SVG 文件。 这对于大型项目来说非常有用。

总而言之，使用 <style> 元素来定义和管理 SVG 中的 CSS 变量是最佳实践，因为它提供了更好的组织性和可维护性。 记住使用回退值来处理未定义的变量，以确保你的 SVG 在各种情况下都能正常显示。