用动画填充颜色 SVG 路径答案

【问题标题】：Fill color SVG path with animation用动画填充颜色 SVG 路径
【发布时间】：2018-01-08 03:10:14
【问题描述】：

我使用以下方法来填充 SVG 路径的颜色。有没有办法给它添加动画。从中心开始填充颜色并展开。

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

    });
});

【问题讨论】：

您可以使用radialGradient 填充，然后为渐变设置动画。

标签： javascript jquery svg

【解决方案1】：

此答案提供了四种不同的选项，使用jQuery.animate()、CSS @keyframes 和SVG SMIL-Animation 为 SVG 路径的填充颜色设置动画：

#1 jQuery.animate() 和 SVG

$(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() 和 SVG 变换属性

$(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>

也许这不是您期望的结果，但这是一种选择。

#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 动画

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

希望能帮到你！

【讨论】：

非常好的解释，让我知道有没有办法以动态方式将 SVG 填充为渐变，而无需在 SVG 中定义径向渐变？
@isuru 是的，当然。但是 SVG 是一种基于 XML 的标记语言，所以你不能用 jQuery 做到这一点。如果您可以使用其他库，请使用snap.svg 或svg.js。否则你必须使用 document.createElementNS("www.w3.org/2000/svg", "radialGradient")。请参阅this 问题以了解更多信息。