Question posted in 
I’m trying to add the gradient on text for my svg image.
Here’s my svg image:
i’ve uploaded here in png format
That’s the way I’m trying to do that:
export const HawllIcon: React.FC<IconSvgProps> = ({
size = 100,
width,
height,
...props
}: IconSvgProps) => (
<svg
height={size || height}
preserveAspectRatio="xMidYMid meet"
version="1.0"
viewBox="0 0 800 500"
width={size || width}
{...props}
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient id="MyGradient" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="5%" stopColor="#ff9459" />
<stop offset="95%" stopColor="#006fee" />
</linearGradient>
</defs>
<g
fill="url(#MyGradient)"
stroke="none"
transform="translate(0,500) scale(0.1,-0.1)"
>
<path
d="M140 2490 l0 -700 195 0 195 0 0 275 0 275 275 0 275 0 0 -275 0
-275 195 0 195 0 0 700 0 700 -195 0 -195 0 0 -260 0 -260 -275 0 -275 0 0
260 0 260 -195 0 -195 0 0 -700z"
/>
<path
d="M2181 3148 c-10 -24 -141 -320 -291 -658 -150 -338 -281 -634 -291
-658 l-18 -42 201 2 201 3 203 505 203 505 16 -40 c9 -22 101 -249 204 -505
l187 -465 203 -3 c191 -2 203 -1 197 15 -4 10 -143 325 -309 700 l-302 683
-193 0 -193 0 -18 -42z"
/>
<path
d="M3133 3183 c3 -5 73 -219 157 -478 83 -258 155 -473 158 -477 4 -4
54 119 111 273 l104 281 -64 204 -63 204 -204 0 c-112 0 -201 -3 -199 -7z"
/>
<path
d="M3883 2490 l-231 -700 176 0 177 0 139 425 c77 234 143 421 146 415
4 -6 31 -89 61 -185 29 -96 57 -171 60 -167 3 4 48 121 98 261 l92 254 -62
198 -62 199 -181 0 -181 -1 -232 -699z"
/>
<path
d="M5055 3178 c-3 -7 -70 -215 -150 -463 -80 -247 -180 -553 -221 -680
-40 -126 -74 -233 -74 -237 0 -4 82 -8 183 -8 l183 0 222 685 c122 376 225
691 228 700 5 13 -16 15 -180 15 -140 0 -188 -3 -191 -12z"
/>
<path
d="M5580 2490 l0 -700 530 0 530 0 0 155 0 155 -335 0 -335 0 0 545 0
545 -195 0 -195 0 0 -700z"
/>
<path
d="M6800 2490 l0 -700 530 0 530 0 0 155 0 155 -335 0 -335 0 0 545 0
545 -195 0 -195 0 0 -700z"
/>
</g>
</svg>
);
But I’m only achieving this:
And I’m trying to achieve that:
What do I need to do to get things done?
I’ve tried to:
- change
fillto almost every variation of this gradient, - change the
gradientUnitsboth ways:objectBoundingBox&userSpaceOnUseand none of them does the thing correctly.
2
Answers
You can use the letters in a mask, and mask off a rectangle that has the gradient fill.
gradientUnits="userSpaceOnUse"
In fact you can achieve a continuous gradient across all
<path>elements by applyinggradientUnits="userSpaceOnUse". In your case you also need to scale the gradient viagradientTransform="scale(10)"to adjust the group transformation/scaling (currently 0.1/10%):Combine paths to a single compound path.
You can also combine all paths by concatenating all
<path>elements’dpath data attribute values:You can further optimise this <> by converting the path data into relative commands and scaling the commands. (e.g. with svg-path-editor)
This way you can avoid the `transform’ group altogether. Another advantage is that the svg becomes much more compact in file size.