用動畫填充彩色SVG路徑
[英]Fill color SVG path with animation
問題描述
我使用以下方法來填充SVG路徑的顏色。 有沒有一種添加動畫的方法。 從中心開始填充並擴散。
$(function(){
$("#btn-test1").on("click",function(){
$("#path1").attr("fill","#0000");
});
});
1 個解決方案
解決方案1
5 已采納 2018-01-04 03:54:12
此答案提供了四個不同的選項，以使用jQuery.animate（） ， CSS @keyframes和SVG SMIL-Animation設置SVG路徑的填充顏色的動畫 ：
＃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 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 路徑填充 animation
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.