在 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 在各种情况下都能正常显示。