SVG in Power BI

[Husain]

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>"

[mwegener]

Hi @Husain ,

did you solve your problem?

If I answered your question, please mark my post as solution, this will also help others.

Please give Kudos for support.

[mwegener · Accepted solution]

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.