在线性渐变停止颜色中应用顺风CSS类

Question

我需要在线性渐变停止颜色属性内的 SVG 图像中使用 tailwind.config 文件的 tailwind 语义 css 类。

我的 React 应用程序有设计器 css 文件，其中十六进制颜色代码用作 var css 类，例如：

--colors-accent-400: #29b6f6;

然后在 tailwind.config 中使用上面的类，其类名称如下：

"filter-color-css" : "var(--colors-accent-400)"

这是我在 SVG 中使用的 Lineargardient：

如果我在线性渐变停止颜色属性中使用 var css 类，如下所示，它就可以工作：

<linearGradient id="progress" x1="0.8" y1="15" x2="3.5" y2="0.1">
            <stop
              offset="0%"
              stopColor="var(--colors-accent-400)"
              stopOpacity="3"
            />
</linearGradient>

但是如果我使用直接 css 类而不是 var css 它就不起作用。

<linearGradient id="progress" x1="0.8" y1="15" x2="3.5" y2="0.1">
            <stop
              offset="0%"
              stopColor="filter-color-css"
              stopOpacity="3"
            />
</linearGradient>

我需要在这里使用 css class 而不是 var css。

Answer 1

我认为

stopColor

正在期待一个颜色值，而您正在传递一个类名。
我会尝试使用

class

来代替。

看看这个例子。