SVG fade color of object-CodePudding

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"?

CodePudding user response：

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  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!

CodePudding user response：

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.