In the snippet below, you'll see 2 SVGs, one with circles and one with paths, both without using gradientUnits="userSpaceOnUse". And the output is what you'd expect.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>
</defs>
<g fill="url(#grad1)">
<circle cx="24" cy="24" r="24"/>
<circle cx="72" cy="24" r="24"/>
<circle cx="72" cy="72" r="24"/>
<circle cx="24" cy="72" r="24"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>
</defs>
<g fill="url(#grad1)">
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2)" />
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 0)" />
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 21)" />
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(0, 21)" />
</g>
</svg>But when using gradientUnits="userSpaceOnUse" with the SVGs above, the SVG with the circles is showing usual behavior and the gradient can be seen across it as a whole, while the SVG with the paths shows a solid color across it as you can see below:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>
</defs>
<g fill="url(#grad1)">
<circle cx="24" cy="24" r="24"/>
<circle cx="72" cy="24" r="24"/>
<circle cx="72" cy="72" r="24"/>
<circle cx="24" cy="72" r="24"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>
</defs>
<g fill="url(#grad1)">
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2)" />
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 0)" />
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 21)" />
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(0, 21)" />
</g>
</svg>CodePudding user response：
- You're transforming the shapes in the userSpaceOnUse case. The gradient is applied to the untransformed paths which are all at the top of the page and therefore red.
- you're duplicating id values. That's invalid.
Here's one way of getting the gradient working.
- I've removed the translates and reconstructed the paths not to require them. To do that more simply I've made the paths relative rather than absolute.
- I've added a gradientTransform to counteract the path scaling.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse" gradientTransform="scale(0.45)">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>
</defs>
<g fill="url(#grad2)">
<path d="M12,21.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
<path d="M33,21.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
<path d="M33,42.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
<path d="M12,42.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
</g>
</svg>