g6-editor icon indicating copy to clipboard operation
g6-editor copied to clipboard

如何在shape里面使用带动画的svg

Open garyganyang opened this issue 5 years ago • 6 comments

目前我只知道可以用image 来放一个svg, 但是若我这个svg有动画(例如旋转),就无法实现了. 请问该如何实现可有动画的svg shape

group.addShape('image', { attrs: { img: /static/rotate.svg, x: x + 158, y: y + 12, width: 16, height: 16 } })

附上 svg <svg t="1555045541984" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2673" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <path d="M512 65.4c-246.9 0-447.1 200.1-447.1 447.1 0 246.9 200.2 447.1 447.1 447.1 246.9 0 447.1-200.2 447.1-447.1 0-246.9-200.2-447.1-447.1-447.1z m160.5 676.7c-14.5 14.7-38.4 14.7-52.9 0L487.4 609.2c-9.9-9.9-9-23.8-9-44.8 0-21.1-4.8-264.5-4.8-264.5 0-20.9 16.7-37.8 37.3-37.8 20.6 0 37.3 16.9 37.3 37.8v264.5c0 1.1 124.5 124.5 124.5 124.5 14.6 14.7 14.3 38.5-0.2 53.2z m0 0" fill="#2CD7AA" p-id="2674"> <animateTransform attributeName="transform" from="0 0 0 " to="360 0 0" type="rotate" begin="0s" dur="5s" repeatCount="indefinite"> </animateTransform> </path> </svg>

garyganyang avatar Apr 25 '19 09:04 garyganyang

他内置的几个shape并没有对应svg的,我之前也想通过svg path生成一个svg图标再在代码中进行一些加工,发现没法做到,目前只能通过image加载成图片。。。希望@antv/g能增加svg的shape

guozhaolong avatar Apr 25 '19 09:04 guozhaolong

不知道 能不能跟 addShape('image' 添加一个animation的css来让图标旋转起来

garyganyang avatar May 31 '19 06:05 garyganyang

你要想添加动画让他旋转肯定可以,你要想调用svg的动画就不行

guozhaolong avatar Jun 04 '19 01:06 guozhaolong

你要想添加动画让他旋转肯定可以,你要想调用svg的动画就不行

兄弟你搞定了吗,

garyganyang avatar Jun 25 '19 06:06 garyganyang

我只是给shape增加了动画,这个就是每帧改变shape的style做到的,让shape旋转很简单的

guozhaolong avatar Jun 26 '19 08:06 guozhaolong

我只是给shape增加了动画,这个就是每帧改变shape的style做到的,让shape旋转很简单的

怎么添加旋转,可以给个示例么

xuxiaodao avatar Mar 02 '20 03:03 xuxiaodao