Issue
I have seen @adamwathan's live streams & he does className="w-5 h-5 text-white" fill="currentColor"
to style an SVG through Tailwind.
How can I do the same for linearGradient
?
I have the following 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>
)
How do I style linearGradient
in SVG that uses fill="url(#a)"
perfectly? I can't change fill="currentColor"
as it will lose reference to id="a"
.
The original SVG is at https://www.sketch.com/images/icons/mac/monochrome/17x17/circle.gradient.linear.svg
Any solutions?
Solution
To style the linearGradient
colors you can use the stop-color
attribute on the <stop>
elements.
<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>
Answered By - juliomalves
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.