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

Question

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

我怎样才能为 做同样的事情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>
)

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

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

有什么解决办法吗？

Answer 1

您还可以创建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],
            },
            ...

资源/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';
...

资源/views/svg/my-svg.blade.php

...
<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);" ...

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

如果你真的想使用<img>，一个概念是使用控制器来构建你的 svg 并返回一个视图response(..., 200)->header('Content-Type', 'image/svg+xml');。我做了类似的事情，我在 url 中设置了颜色<img src="my-svg.svg?fill=blue-500"... （并且它可以与tinyMCE 6成功配合，它不允许使用svg）

Answer 2

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

<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>