在使用`fill=“<linearGradient> (#a)”`时，如何使用带有Tailwind CSS的SVG url样式？

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

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

最初的SVG在https://www.sketch.com/images/icons/mac/monochrome/17x17/circle.gradient.linear.svg

有什么解决方案吗？

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

​

Answer 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/ariables.css

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

resources/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"...，允许顺风的类影响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);" ...