我使用以下方法填充SVG路径的颜色。有没有办法为它添加动画。从中心开始颜色填充和传播。
$(function(){
$("#btn-test1").on("click",function(){
$("#path1").attr("fill","#0000");
});
});
答案 0 :(得分：4)
此答案提供了四个不同的选项，可使用jQuery.animate()，CSS @keyframes和SVG SMIL-Animation为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>
$(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>
也许这不是你期望的结果，但它是一种选择。
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>
<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>
我希望我能帮到你！