SVG linear gradient doesn't work on other elements-CodePudding

I created an SVG logo and want to animate it inside a React component. In my SVG I have 3 different gradients: green, orange, and red. I noticed that when I'm trying to assign a gradient via className to another element it fills it with just a plain color. Could you please help me to understand what I'm doing wrong here?

here is the code: https://codesandbox.io/s/shy-moon-zs1ik5

CodePudding user response：

You have a geadient with cx="1202.5" cy="249.5" and a radius of r="18.5". This falls in the center of the first rectangle but far away from the center of the second one. The fill of this one is the peripheric red from the gradient.

A possible solution would be using the same path with the <use> element for all the identical paths you have. Next you give the use the required class.

Please observe that I've putted the path in the defs. Also the path has an id neded for the xlink:href of the use element.

.red-light{fill: url(#red-gradient);}

<svg viewBox="700 230 200 200">
  <defs>
    <radialGradient id="red-gradient" cx="1202.5" cy="249.5" r="18.5" gradientUnits="userSpaceOnUse">
      <stop offset="0.04" stop-color="#fff"></stop>
      <stop offset="0.12" stop-color="#fef4f3"></stop>
      <stop offset="0.28" stop-color="#fad8d4"></stop>
      <stop offset="0.49" stop-color="#f4aba1"></stop>
      <stop offset="0.74" stop-color="#eb6b5b"></stop>
      <stop offset="1" stop-color="#e1230a"></stop>
    </radialGradient>

    <path id="indicator" d="M1216.65,268h-28.3a4.69,4.69,0,0,1-4.35-4.35v-28.3a4.69,4.69,0,0,1,4.35-4.35h28.3a4.69,4.69,0,0,1,4.35,4.35v28.3C1221,268,1218.78,268,1216.65,268Z"></path>
  </defs>

  <use xlink:href="#indicator" id="indicator-3" data-name="indicator-3"  transform="translate(-420)" />

  <use xlink:href="#indicator" id="indicator-10" data-name="indicator-10"  transform="translate(-460,50)" />

</svg>