Forum Discussion

Husain's avatar
Husain
Icon for Advocate I rankAdvocate I
7 years ago
Solved

SVG 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's avatar
    mwegener
    Icon for Most Valuable Professional rankMost 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.

  • mwegener's avatar
    mwegener
    Icon for Most Valuable Professional rankMost Valuable Professional

    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.