Fill color SVG path with animation

问题

I have use following way to fill color of SVG paths. Is there a way to add animation to it. Color filling starting from center and spread.

$(function(){
    $("#btn-test1").on("click",function(){
        $("#path1").attr("fill","#0000");   

    });
});

回答1:

This answer provides four different options to animate the fill color of a SVG path using jQuery.animate(), CSS @keyframes and SVG SMIL-Animation:

#1 jQuery.animate() and SVG <radialGradient>

$(function(){
  $("button").on("click",function(){
  
    $(this).animate(
      {
        textIndent: 1, // or whatever
      }, {
        duration: 3000,
	step: function ( now, fx ) {
            	// arguments:
                // now: numeric value of the property being animated at each step
                // fx: reference to the jQuery.fx prototype object
                	// fx.start: first value of the animated property
                    // fx.end: last value of the animated property
                var from = 0,
                	  to = 700,
                    r = from + to * ( now - fx.start ) / ( fx.end - fx.start ); // animate r from 0 to 700
                
                $("#gradient").attr( "r", r + "px" );
			  },
        complete: function () {
          $("#path").attr("fill", "#000"); // callback
        }
      }
    );
    
  });
});

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<body>

  <button>Start Animation</button>
  
  <svg height="150" width="300">
    <defs>
      <radialGradient id="gradient" r="0px" gradientUnits="userSpaceOnUse">
        <stop offset="20%" style="stop-color: #000; stop-opacity: 1" />
        <stop offset="100%" style="stop-color: #000; stop-opacity: 0" />
      </radialGradient>
    </defs>
    <path id="path" d="M 0 0 Q 300 300 300 0 z" fill="url(#gradient)" />
  </svg>
</body>

#2 jQuery.animate() and SVG transform attribute

$(function(){
  $("button").on("click",function(){
  
    $(this).animate(
      {
        textIndent: 1, // or whatever
      }, {
        duration: 3000,
	step: function ( now, fx ) {
            	// arguments:
                // now: numeric value of the property being animated at each step
                // fx: reference to the jQuery.fx prototype object
                	// fx.start: first value of the animated property
                    // fx.end: last value of the animated property
                var from = 0,
                	  to = 1,
                    scale = from + to * ( now - fx.start ) / ( fx.end - fx.start ); // animate r from 0 to 700
                
                $("#path").attr( "transform", "scale(" + scale + ")" );
			  }
      }
    );
    
  });
});

#path {transform-origin: 50% 50%;}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

  <button>Start Animation</button>
  
  <svg height="150" width="300">
     <path id="path" d="M 0 0 Q 300 300 300 0 z" fill="#000" />
  </svg>

</body>

Maybe that isn’t the result you expected, but it’s an option.

#3 CSS @keyframes

stop {
  stop-opacity: 0;
  animation: 3s animateStopOpacity;
}
stop:last-child {
  animation-delay: 2s;
}

@keyframes animateStopOpacity {
    from {stop-opacity: 0;}
    to {stop-opacity: 1;}
}

<body>
  <svg height="150" width="300">
    <defs>
      <radialGradient id="gradient" r="50%" gradientUnits="userSpaceOnUse">
        <stop offset="0%" style="stop-color: #000; stop-opacity: 1" />
        <stop offset="100%" style="stop-color: #000; stop-opacity: 0" />
      </radialGradient>
    </defs>
    <path id="path" d="M 0 0 Q 300 300 300 0 z" fill="url(#gradient)" />
  </svg>
</body>

#4 SVG SMIL Animation

<body>

  <svg height="150" width="300">
    <defs>
      <radialGradient id="gradient" r="100px" gradientUnits="userSpaceOnUse">
        <stop offset="20%" style="stop-color: #000; stop-opacity: 1" />
        <stop offset="100%" style="stop-color: #000; stop-opacity: 0" />
        <animate 
    	attributeName="r"
    	from="0"
    	to="700"
    	dur="3s"
    	fill="freeze" 
       />
      </radialGradient>
    </defs>
    <path id="path" d="M 0 0 Q 300 300 300 0 z" fill="url(#gradient)" />
  </svg>

</body>

I hope I could help you!

来源：https://stackoverflow.com/questions/48082164/fill-color-svg-path-with-animation

标签

javascript

jquery

svg