Forum Discussion

smpa01's avatar
smpa01
Community Champion
6 years ago
Solved

Using Animated SVG as page background

Hello experts,   I am trying to use an animated SVG as my page background. I have started newly with svg animation.   I noticed that for some of the animation returns an error in power bi as foll...
Need Help
  • dm-p's avatar
    dm-p
    6 years ago

    Hi smpa01,

    The issue is the SVG code itself. If you load the image into a web browser such as Chrome, you'll see the following:

     

    It's a bit more forgiving in other editors, but Power BI Desktop has the same issue.

    You need to remove the orphaned svg attribute in column 24. This can then be added as a background in Desktop, e.g.:

    Looks like the placement is a bit off, but definitely possible.

    Here's my tweaked version of your SVG:

     

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="l.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="210mm"
   height="297mm"
   viewBox="0 0 210 297" enable-background="new 0 0 1B8 100" xml:space="preserve"> 
<circle
       style="fill:#ffffff;fill-opacity:1;stroke:#2a8071;stroke-width:2.64583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:5.29166668, 5.29166667999999962;stroke-dashoffset:0;stroke-opacity:1"
       id="path819"
       cx="92"
       cy="106"
       r="61.232143" >
       <animateTransform    id="path819"
                   			attributeName="transform"
                     		attributeType="XML"
                     		type="rotate"
                     		from ="0 92 106"
                     		to = "360 92 106"
                     		dur ="10s"
                     		repeatCount = "indefinite"/>
</circle>

    
</svg>

     

    Thanks for such a cool question! I never even thought that these would work, so I've learned a bunch too 🙂

    Cheers,

    Daniel

    If my post solves your challenge, then please consider accepting as a solution to help other forum members find the answer more quickly 🙂

SandraCalc's avatar
SandraCalc
Frequent Visitor
4 years ago

Hello, I am trying to do something similar, but i want the animation to start on mouseover, i just posted that question. Have you tried any hover solution?

Thanks

smpa01's avatar
smpa01
Community Champion
4 years ago

SandraCalc  if you want a mouseevent you need to develop a fully fledged custom viz. I am currently doing that, will publish my work soon. 

Coming back to the Q, the page background only accepts a .svg file (not even .html) and even if you write an inline javascript to track and trigger mouseevent, it would not work. I have tried and tested. Simply put, the javascript in background .svg does not work probably becuase it does not have javascript engine.

There is no way to hookup your mousevent to background .svg. 

If you are not inclined to develop custom viz, you need to use Power BI button which probably has on-hover trigger but you will be limited in capacity (e.g. trigger a gif on hover). There is no way in current capacity you can go nuts in Power bi in the same way you could in developing a web page. The only solution is custom viz.

 

Also, your background .svg has no way to talk to your data. So there is absolutely no data-driven-animation possible anyway (transition/keyframe/moseevent - nothing at all).

 

I will wait till dm-p weighs on this topic.