css Question posted in
Some basic documentation can be found here.

Css – Could someone tell me why my radial gradient SVG is not animating on hover?

The radial gradient is supposed to grow from 10% to 100% on hover, but it’s just not doing anything. Can’t understand what I’m doing wrong.

<svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">

<style><![CDATA[
#svgDoc {
    pointer-events: all
}

#svgDoc:hover #svgGrad {
    animation: svgGrad_f_p 3000ms linear 1 normal forwards
}

@keyframes svgGrad_f_p {
    0% {
        offset: 10%
    } 
    100% {
        offset: 100%
    }
}
]]>
</style>

<defs>
<radialGradient id="svgGrad-fill" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)">
<stop id="svgGrad-fill-0" offset="0%" stop-color="#ff0000"/>
<stop id="svgGrad-fill-1" offset="10%" stop-color="#000"/>
</radialGradient>
</defs>

<rect id="svgGrad" width="500" height="500" rx="0" ry="0" fill="url(#svgGrad-fill)"/>
</svg>
Tags:

2

Answers


  1. 0

    You can’t manipulate the stop attribute via CSS as it "collides" with the CSS offset-path related property of the same name.

    A workaround might be to animate the gradient via SMIL animation like so:

    <h3>Hover me</h3>
<svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <defs>
    <radialGradient id="svgGrad-fill" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)">
      <stop id="svgGrad-fill-0" offset="0%" stop-color="#ff0000" />
      <stop id="svgGrad-fill-1" offset="10%" stop-color="#000" >
           <animate attributeName="offset" fill="freeze" values="0.1;1" dur="1s" repeatCount="1" begin="svgGrad.mouseover"  /> 
           <animate attributeName="offset" fill="freeze" values="1;0.1" dur="1s" repeatCount="1" begin="svgGrad.mouseout"  /> 
      </stop>
    </radialGradient>
  </defs>

  <rect id="svgGrad" width="500" height="500" rx="0" ry="0" fill="url(#svgGrad-fill)" />
</svg>

    Fortunately, SVG’s <animate> element allows you to
    add events to start (or stop) playback. See "mdn docs: begin"

    <animate attributeName="offset" fill="freeze" values="1;0.1" dur="1s" repeatCount="1" begin="svgGrad.mouseout"  />
    Login or Signup to reply.
  2. 0

    To animate the radial gradient in your SVG you need to ensure that the properties being animated are compatible with CSS animations. In SVG you cannot directly animate the offset property of gradient stops using CSS. Instead, you need to use SMIL (Synchronized Multimedia Integration Language) for animating $VG properties.

    Here’s how you can modify your SVG to animate the radial gradient using SMIL:

    <svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search