我见过很多关于如何完成像here这样的颜色的完整对象动画的问题和解答。但是,是否有可能通过填充(路径的内部)来制作一个尖锐的移动色块?如何去动画一个SVG呢?使用CSS动画沿着路径填充SVG
-1
A
回答
0
有几个JavaScript库,你可以看看:svgjs或Snap.svg ....应该指出你在正确的方向。
只是一段简短的代码来说明如何快速工作。我只会给你一个你想要改变悬停的svg填充的参数。
<svg id="targetSvg" ...>
<!-- path forming the upper shell -->
<g>
<path id="1" fill="#000" d="..."/>
<path id="2" fill="#fff" d="..."/>
<path id="3" fill="#000" d="..."/>
</g>
</svg>
的Javascript
//select the svg you want to have the effect on
s = Snap("#targetSvg");
s.select("g").hover(isHover, idHoverOut);
function isHover() {
this.selectAll('path').forEach(function(el){
el.attr({ class: 'fadeIn' }) });
};
function isHoverOut() {
this.selectAll('path').forEach(function(el){
el.attr({ class: 'fadeOut' }) });
};
CSS样式
.fadein {
transition: fill 1s linear;
fill:blue;
}
.fadeout {
transition: fill 1s linear;
}
相关问题
- 1. 使用css动画svg路径填充
- 2. 使用CSS来动画填充SVG路径元素
- 3. 沿着路径发出动画SVG的动画
- 4. 沿着盆景路径动画动画
- 5. SVG动画。绘制后填充路径
- 6. svg填充路径动画问题
- 7. 沿动画SVG路径一个div
- 8. 如何沿着路径制作动画
- 9. 沿着动画路径的SVG:animateMotion
- 10. raphaelJS 2.1沿着路径动画
- 11. 沿着路径动画改变起点
- 12. 使用填充动画svg
- 13. SVG - 沿着路径的动画矩形;矩形中心总是在路径上
- 14. SVG路径填充颜色与CSS
- 15. 动画填充路径 - Silverlight
- 16. 如何让SVG圈沿着SVG路径拖动?
- 17. QGraphicsItem沿着路径移动
- 18. 沿着路径滚动Paper.js
- 19. 沿着路径拖动snap.svg
- 20. jQuery选择所有SVG路径并应用动画填充
- 21. 动画svg路径
- 22. 如何为SVG路径中的“填充”设置动画效果?
- 23. 动画SVG路径填充自下而上
- 24. 使用javascript的SVG填充动画
- 25. SVG:填充弧形动画?
- 26. 使用CSS使用clipPath动画SVG路径
- 27. iPhone UIImageView与动画图像需要沿着路径移动
- 28. 如何使用CSS动画SVG的填充颜色?
- 29. 使用jQuery的SVG路径动画/ javascript
- 30. 沿着路径的ActionScript 2
如果使用多个渐变色,你可以得到锐利的边缘。 –
尝试在谷歌搜索。 –
我不认为任何人都非常了解你想要什么。你能嵌入(或链接)一张图片吗? –