SVG fade color of object

user_18807217 0
Viewed 73

I want to fade the fill color of a svg circle from one color to another color, like from red to black.

<svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" fade-to="black"/>
</svg>

What would I do in place of the fade-to="black"?

fade svg
2 Answers

Basically you just need to change the circle's fill attribute either with:

  • css (e.g :hover)
  • svg SMIL animation (using begin="click")
  • javaScript (e.g. click eventListner)

let dotJs = document.querySelector('#dotJs');

dotJs.addEventListener('click', function(e) {
  e.currentTarget.classList.toggle('active')
})
circle {
  transition: 0.5s fill;
}

.active {
  fill: #000
}

#dotCSS:hover {
  fill: #000
}
<p>Css hover</p>
<svg height="100" width="100">
    <circle id="dotCSS" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<p>JS click</p>
<svg height="100" width="100">
    <circle id="dotJs" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<p>SMIL click</p>
<svg height="100" width="100">
    <circle id="dot" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
      <animate id="startAnimation"
               href="#dot" 
               attributeName="fill" 
               from="red" 
               to="black" 
               begin="click"
               dur="0.5s" 
               repeatCount="0"
               fill="freeze"
/>
</svg>

Check Mike Harris' post: Toggling SVG without any scripting for a more advanced svg only example.

user_150156750

You will want to use the radial gradient to have this work. You can play around with the offset numbers for the desired effect.

<svg height="100" width="100">
  <defs>
    <radialGradient id="myGradient">
      <stop offset="10%" stop-color="red" />
      <stop offset="95%" stop-color="black" />
    </radialGradient>
  </defs>

  <!-- using my radial gradient -->
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="url('#myGradient')"/>
</svg>

Hope this helps!

Edit***: After doing some more research and figuring out how to do what you were suggesting, this is what I came up with:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .redBall{
        fill: red;
        z-index: 1;
        -webkit-animation: pulsateMore 3s ease-out;
        -webkit-animation-iteration-count: infinite; 
    }

    @-webkit-keyframes pulsateMore {
        0% { 
        fill: red;
        }
        50% { 
        fill: black;
        }
        00% { 
        fill: red;
        }
    }
    </style>
    <!-- <link rel="stylesheet" href="style.css" /> -->
</head>
<body>
    <svg height="100" width="100">
        <circle class="redBall" cx="50" cy="50" r="40"/>
    </svg>
</body>
</html>

You can manipulate this code from here to have a Javascript function that will have an onClick event that will trigger the circle to go from red to black, instead of pulsating. If this has helped you, please accept the answer, thanks!

user_139248210
Related