Reusable SVG with different gradient colors

As per my requirement, I need shaped path in which I need to apply different gradient colors. Just for example here, I am taking a circle and trying to do the same.

Here is the code:

.box--blue{
  fill: blue;
}

.box--red{
  fill: red;
}

<div>
  <svg>
    <defs>
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="transparent"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
    </defs>
    <symbol id="gra2" viewbox="0 0 100 100">
  
  <circle cx="50" cy="50" r="50" fill="url(#Gradient2)" />
    </symbol>
</svg>
</div>


<div class="box box--red">
  <svg>
    <use xlink:href="#gra2"></use>
  </svg>
</div>

<div class="box box--blue">
  <svg>
    <use xlink:href="#gra2"></use>
  </svg>
</div>

Requirement:

I need those two gradient shapes with different colors by reusing the available SVG.

Browser support: IE10+, chrome and Firefox.

Note: I don't want to hardcode each color related gradient under the SVG. The Gradient color should be able to inherit. That is how I can reuse the SVG, IMO.

Reusable SVG with different gradient colors

Requirement:

1 Answers