使用 `fill="url(#a)"` 时如何使用 Tailwind CSS 设置 SVG <linearGradient> 样式？

Posted 2023-03-05

【中文标题】使用 `fill="url(#a)"` 时如何使用 Tailwind CSS 设置 SVG <linearGradient> 样式？

【英文标题】：How to style SVG <linearGradient> with Tailwind CSS when using `fill="url(#a)"`?

【发布时间】：2021-06-11 07:03:27

【问题描述】：

我看过 @adamwathan 的直播，而他确实通过 Tailwind 为 SVG 设置样式 className="w-5 h-5 text-white" fill="currentColor"。

我怎样才能为linearGradient 做同样的事情？

我有以下 SVG：

import React from 'react'

export const LinearGradient = () => (
    <svg className="w-5 h-5" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient x1="50%" y1="92.034%" x2="50%" y2="7.2%" id="a">
                <stop offset="0%" />
                <stop stopOpacity="0" offset="100%" />
            </linearGradient>
        </defs>
        <circle
            className="text-white"
            stroke="currentColor"
            fill="url(#a)"
            cx="8.5"
            cy="8.5"
            r="6"
            fillRule="evenodd"
            fillOpacity=".8"
        />
    </svg>
)

如何在完美使用fill="url(#a)" 的SVG 中设置linearGradient 的样式？我无法更改 fill="currentColor"，因为它将失去对 id="a" 的引用。

原始 SVG 位于 https://www.sketch.com/images/icons/mac/monochrome/17x17/circle.gradient.linear.svg

有什么解决办法吗？

【参考方案1】：

要设置linearGradient 颜色的样式，您可以在<stop> 元素上使用stop-color 属性。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<svg class="w-32 h-32 text-blue-500" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient x1="50%" y1="92.034%" x2="50%" y2="7.2%" id="a">
        <stop offset="0%" stop-color="currentColor" />
        <stop stop-opacity="0" offset="100%" stop-color="white" />
      </linearGradient>
    </defs>
    <circle stroke="currentColor" fill="url(#a)" cx="8.5" cy="8.5" r="6" fill-rule="evenodd" fill-opacity=".8" />
</svg>

【讨论】：

为什么没有div 就不能工作？我在本地放置了className="w-5 h-5 text-pink-400"，这与 JSBin 不同。甚至 circle 也不是在 JSBin 上工作，而是在本地工作。

那是我的错，我忘记在我的 sn-p 中将 className 更改为 class（它不像你的代码那样使用 React）。我已经更新了代码。

很奇怪，我尝试在 JSBin 中这样做，但没有成功，所以我保留了 div 原样。很高兴，它现在可以工作了:)

【参考方案2】：

您还可以从 tailwind.config.js 创建可在 SVG 中使用的变量。

这是一个如何在 Laravel 8 项目中执行此操作的示例。

tailwind.config.js

const colors = require('tailwindcss/colors');

module.exports = 
    theme: 
        colors: 
            blue: 
                300: colors.blue[300],
                500: colors.blue[500],
            ,
            ...

resources/css/variables.css

:root 
    --color-blue-300: theme('colors.blue.300');
    --color-blue-500: theme('colors.blue.500');

资源/css/app.css

@import './variables.css';

@import 'tailwindcss/base';
...

resources/views/svg/my-svg.blade.php

这里我在另一个视图中使用（例如：my-layout.blade.php）@include("svg.my-svg")。 使用它而不是 <img src="my-svg.svg"... 允许 tailwind 的类影响 svg。

...
<defs>
    <linearGradient id="grad1" x1="0%" y1="100%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:var(--color-blue-300);" />
        <stop offset="100%" style="stop-color:var(--color-blue-500);" />
    </linearGradient>
</defs>
...
<path style="fill: url(#grad1);" ...