カラーSVGパスをアニメーションで塗りつぶします

debugcn 投稿 Dev

isuru

SVGパスの色を塗りつぶすために次の方法を使用しています。それにアニメーションを追加する方法はありますか？中心から始まり、広がるカラーフィリング。

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

    });
});

Bとして

この回答は、jQuery.animate（）、CSS @keyframes、およびSVG SMILを使用してSVGパスの塗りつぶし色をアニメーション化するための4つの異なるオプションを提供します-アニメーション：

＃1 jQuery.animate（）および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（）および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 SVGSMILアニメーション

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

私はあなたを助けることができると思います！

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]