Why does the gradient in svg overlap weirdly?

Question

SVG

There is svg, it is inserted into the page in symbol:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 264 238" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g>
  <path d="M257 0l-250 0c-4,0 -7,3 -7,7l0 170c0,4 3,7 7,7l53 0 2 6c1,5 4,8 9,9l3 0 -2 3c-2,4 -3,8 -3,12 0,13 11,24 24,24 14,0 25,-11 25,-24 0,-4 -1,-8 -3,-12l-2 -3 29 0 -1 3c-2,4 -3,8 -3,12 0,13 11,24 24,24 13,0 24,-11 24,-24 0,-4 -1,-8 -3,-12l-1 -3 3 0c5,-1 9,-4 10,-9l29 -134 36 0 0 121c0,2 -1,3 -3,3l-43 0c-1,0 -2,1 -2,2 0,1 1,2 2,2l43 0c4,0 7,-3 7,-7l0 -170c0,-4 -3,-7 -7,-7zm-164 235c-11,0 -20,-10 -20,-21 0,-12 9,-21 20,-21 12,0 21,9 21,21 0,11 -9,21 -21,21zm69 0c-12,0 -21,-10 -21,-21 0,-12 9,-21 21,-21 11,0 21,9 21,21 0,11 -10,21 -21,21zm84 -187c2,-2 3,-5 3,-8 0,-6 -5,-11 -11,-11l-12 0c-11,0 -21,8 -23,19l-1 4 -39 0c-1,0 -2,1 -2,2 0,1 1,2 2,2l38 0 -5 22 -145 0c-3,0 -6,2 -8,5 -2,2 -3,5 -2,9l9 45c1,1 2,2 3,1 1,0 1,-1 1,-2l-10 -45c0,-2 0,-4 2,-6 1,-2 3,-3 5,-3l147 0c0,0 1,-1 1,-1l7 -32c2,-10 10,-16 20,-16l12 0c4,0 8,3 8,7 0,4 -4,8 -8,8l-12 0c-3,0 -5,1 -5,4l-30 138c-1,3 -4,5 -7,5l-6 0 -1 0c-4,-4 -9,-6 -15,-6 -6,0 -11,2 -15,6l-1 0 -37 0 0 0c-5,-4 -10,-6 -16,-6 -5,0 -11,2 -15,6l0 0 -5 0c-4,0 -7,-2 -8,-5l-8 -38c0,-1 -1,-2 -2,-1 -1,0 -1,1 -1,2l6 27 -53 0c-2,0 -3,-1 -3,-3l0 -121 141 0c1,0 1,-1 1,-2 0,-1 0,-2 -1,-2l-141 0 0 -45c0,-2 1,-3 3,-3l250 0c2,0 3,1 3,3l0 45 -18 0 4 -4z"/>
  <circle cx="27" cy="28" r="8"/>
  <circle cx="50" cy="28" r="8"/>
  <circle cx="74" cy="28" r="8"/>
  <path d="M139 163l-23 0c0,0 -1,0 -1,0 -1,1 -1,1 -1,2l2 14c0,1 0,2 1,2l21 0c1,0 2,-1 2,-2l1 -14c0,-1 0,-1 0,-2 -1,0 -1,0 -2,0zm-3 14l-17 0 -1 -11 19 0 -1 11zm21 4l19 0c1,0 2,-1 2,-2l3 -14c0,-1 0,-1 0,-2 0,0 -1,0 -2,0l-21 0c-1,0 -2,0 -2,1l-1 15c0,0 0,1 0,1 1,0 1,1 2,1zm2 -15l18 0 -2 11 -17 0 1 -11zm-17 -36l-29 0c0,0 -1,0 -1,0 0,1 0,1 0,2l1 14c0,1 1,2 2,2l26 0c1,0 2,-1 2,-2l1 -14c0,-1 0,-1 -1,-2 0,0 -1,0 -1,0zm-3 14l-23 0 -1 -11 25 0 -1 11zm23 -29l28 0c1,0 2,-1 2,-2l3 -14c1,-1 0,-2 -1,-2l-31 0c-1,0 -2,1 -2,1l-1 15c0,1 1,2 2,2zm3 -15l26 0 -2 11 -25 0 1 -11zm-6 48l24 0c1,0 2,-1 2,-2l3 -14c0,-1 0,-1 0,-2 0,0 -1,0 -1,0l-27 0c-1,0 -1,0 -1,1l-2 15c0,0 1,1 1,1 0,1 1,1 1,1zm3 -15l22 0 -2 11 -21 0 1 -11zm-52 -20c0,1 1,2 2,2l31 0c1,0 2,-1 2,-2l1 -14c1,-1 0,-2 -1,-2l-34 0c-1,0 -2,1 -2,2l1 14zm33 -13l-1 11 -28 0 -1 -11 30 0zm-73 30c-1,0 -1,0 -2,0 0,1 0,1 0,2l3 14c0,1 1,2 2,2l23 0c1,0 1,0 1,-1 1,0 1,-1 1,-1l-1 -15c0,-1 -1,-1 -2,-1l-25 0zm4 14l-2 -11 21 0 1 11 -20 0zm3 19c-1,0 -1,0 -1,0 -1,1 -1,1 -1,2l3 14c0,1 1,2 2,2l19 0c0,0 1,-1 1,-1 1,0 1,-1 1,-1l-2 -15c0,-1 0,-1 -1,-1l-21 0zm4 14l-2 -11 17 0 1 11 -16 0zm-17 -64c0,1 1,2 2,2l28 0c0,0 1,-1 1,-2l-1 -15c0,0 -1,-1 -2,-1l-29 0c-1,0 -2,1 -2,2l3 14zm27 -13l0 11 -24 0 -2 -11 26 0z"/>
  <path class="fil3" d="M93 207c-3,0 -6,3 -6,7 0,4 3,7 6,7 4,0 7,-3 7,-7 0,-4 -3,-7 -7,-7z"/>
  <path class="fil3" d="M162 207c-4,0 -7,3 -7,7 0,4 3,7 7,7 4,0 7,-3 7,-7 0,-4 -3,-7 -7,-7z"/>
 </g>
</svg>

And here is the gradient:

<linearGradient id="red-blue" x1="0%" y1="100%" x2="0%" y2="0%">
    <stop offset="0%" style="stop-color:#f00032;stop-opacity:1;" />
    <stop offset="100%" style="stop-color:#1c5cff;stop-opacity:1;" />
</linearGradient>

Inserting into the page goes like this:

<svg class="inline-svg-icon" fill="url(#red-blue)"><use xlink:href="#cart"></use></svg>

The "inline-svg-icon" cass contains a single rule: "display: inline-block".

This is the expected result:


But after applying the gradient, this is what happens:


Why is this happening and how to make it look right?

Answer 1

You must use the userSpaceOnUse value for gradientUnits .

<linearGradient gradientUnits="userSpaceOnUse" ...>

When you write

<svg class="inline-svg-icon" fill="url(#red-blue)"><use...>

in fact, every element simply inherits this fill attribute. And by default the gradient is drawn within the bounds of the element. If you specify userSpaceOnUse , then the gradient will be drawn within the current viewport.
https://codepen.io/alexeyten/pen/rNLQKbm?editors=1000

Answer 2

fill is applied to each svg object individually, so this effect is obtained.
I think one of the easiest solutions would be to use a mask.
That is, you create one large object, which you fill with a gradient, and use the svg itself as a mask for this object.