Forum Discussion
Husain
Advocate I
7 years agoSVG in Power BI
Hi
I am experimenting with animated images in Power Bi using SVGs
I succeeded in creating few animated images. Please see attached file
https://drive.google.com/file/d/1bCJ91OYhzz7YAh-rmbKRrS_y02kuV7-d/view?usp=sharing
However I am not able to create a Moving Circle
Code i found from (https://css-tricks.com/guide-svg-animations-smil/)
Here is my try
Moving Circle = "data: image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='500' height='350'>
<circle id='orange-circle' r='30' cx='50' cy='50' fill='orange' />
<rect id='blue-rectangle' width='50' height='50' x='25' y='200' fill='#0099cc'></rect>
<animate
xlink:href='#orange-circle'
attributeName='cx'
from='50'
to='450'
dur='5s'
begin='0s'
repeatCount='2'
fill='freeze'
id='circ-anim'/>
<animate
xlink:href='#blue-rectangle'
attributeName='x'
from='50'
to='425'
dur='5s'
begin='0s'
repeatCount='indefinite'
fill='freeze'
id='rect-anim'/>
</svg>"Hi Husain,
this should work.
Moving Circle = "data: image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='500' height='350'> <circle id='orange-circle' r='30' cx='50' cy='50' fill='orange'> <animate attributeName='cx' from='50' to='450' dur='5s' begin='0s' repeatCount='2' fill='freeze' id='circ-anim'/> </circle> <rect id='blue-rectangle' width='50' height='50' x='25' y='200' fill='blue'> <animate attributeName='x' from='50' to='425' dur='5s' begin='0s' repeatCount='indefinite' fill='freeze' id='rect-anim'/> </rect> </svg>"If I answered your question, please mark my post as solution, this will also help others.
Please give Kudos for support.
2 Replies
- mwegener
Most Valuable Professional
Hi Husain,
this should work.
Moving Circle = "data: image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='500' height='350'> <circle id='orange-circle' r='30' cx='50' cy='50' fill='orange'> <animate attributeName='cx' from='50' to='450' dur='5s' begin='0s' repeatCount='2' fill='freeze' id='circ-anim'/> </circle> <rect id='blue-rectangle' width='50' height='50' x='25' y='200' fill='blue'> <animate attributeName='x' from='50' to='425' dur='5s' begin='0s' repeatCount='indefinite' fill='freeze' id='rect-anim'/> </rect> </svg>"If I answered your question, please mark my post as solution, this will also help others.
Please give Kudos for support.