The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other SVG+CSS: Gradient with variable color

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #203115


    I want to create an SVG with several circles. These shall be filled with an radial gradient (transparency to the edges) with different colors. As I am going to have several hundreds of these circles and want to have the colors still be easily customizable in CSS I do not want to define several gradients with different colors.
    Is there some selector which lets me query <stop>s as children of an element the gradient is applied to? Is there any trick with currentColor? As far as I see the problem is that the gradient is no children of the circle. Can you point me in the right direction?

    This is what I’ve got so far:

    .AP {
      fill: url(#gradRadial);
    .AP001 {
      fill: #FF0;   // yellow gradient
    .AP002 {
      fill: #0F0;   // green gradient
    <svg height="50%" width="100%">
        <radialGradient id="gradRadial">
          <stop offset="0%"   stop-color="currentColor" stop-opacity="1.0" />
          <stop offset="100%" stop-color="currentColor" stop-opacity="0.0" />
      <circle class="AP AP001" cx="10%" cy="45%" r="6%" />
      <circle class="AP AP002" cx="15%" cy="45%" r="6%" />

    Thanks in advance!


    I think the options here are to use JavaScript – or not having an inline svg at all and add the gradient as a background. In case of the latter CSS only could be used.


    Not really relevant what I posted here…

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Other’ is closed to new topics and replies.