search

antvis / g6-editor

534 stars 171 forks source link

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

Open garyganyang opened 5 years ago

garyganyang commented 5 years ago

目前我只知道可以用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>

guozhaolong commented 5 years ago

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

garyganyang commented 5 years ago

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

guozhaolong commented 5 years ago

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

garyganyang commented 5 years ago

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

兄弟你搞定了吗,

guozhaolong commented 5 years ago

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

xuxiaodao commented 4 years ago

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

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