Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Join us for an expert-led overview of the tools and concepts you'll need to become a Certified Power BI Data Analyst and pass exam PL-300. Register now.

Reply
SandraCalc
Frequent Visitor

SVG animation background image with mouseover effects

I am trying to change the svg code of a background image that zooms when the page is loaded, to hover effect, but with no sucess.
When i change the code to hover, opening in browser results, but not in power bi.
This is the code, working both in browser and in pbi (after exporting the imagem to svg, added class in the beginig, and style with the animation in the end (got this from animista net site) The rest of the stuff is the exported image made in adobe illustrator.

 

<?xml version="1.0" encoding="UTF-8"?><svg
class="kenburns-top"
 id="Camada_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 141.73 148.62"><defs><style>.cls-1{fill:#e8eaec;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-18,.cls-19,.cls-20,.cls-21,.cls-22,.cls-23,.cls-24,.cls-25,.cls-26,.cls-27,.cls-28,.cls-29,.cls-30,.cls-31,.cls-32,.cls-33,.cls-34,.cls-35,.cls-36,.cls-37,.cls-38,.cls-39,.cls-40,.cls-41,.cls-42,.cls-43,.cls-44,.cls-45,.cls-46,.cls-47,.cls-48,.cls-49,.cls-50,.cls-51,.cls-52,.cls-53,.cls-54,.cls-55,.cls-56,.cls-57,.cls-58,.cls-59,.cls-60,.cls-61,.cls-62,.cls-63,.cls-64,.cls-65,.cls-66,.cls-112{fill:#f6f7f8;}.cls-112,.cls-114,.cls-124{opacity:.03;}.cls-113{fill:#98a2ac;}.cls-113,.cls-130,.cls-163{opacity:.35;}.cls-209{fill:url(#Gradiente_sem_nome_2);}.cls-114{fill:#f5f6f7;}.cls-115{fill:#364a5d;}.cls-116{fill:#596979;}.cls-117{fill:#d9dde0;}.cls-118{fill:#8c97a2;}.cls-119{fill:#384b5f;}.cls-120{fill:#d4d8dc;}.cls-121{fill:#e6e8eb;}.cls-122{fill:#a1aab3;}.cls-123{fill:#72808d;}.cls-124{fill:#f7f8f9;}.cls-125{fill:#a9b1ba;}.cls-126{fill:#667584;}.cls-127{fill:#5f6f7e;}.cls-128{fill:#aeb6be;}.cls-128,.cls-193,.cls-202{opacity:.28;}.cls-129{fill:#5e6e7d;}.cls-129,.cls-148,.cls-186{opacity:.55;}.cls-130{fill:#97a1ab;}.cls-131{fill:#f9fafa;}.cls-132{fill:#b6bdc4;}.cls-132,.cls-187,.cls-203{opacity:.25;}.cls-133{fill:#7a8794;}.cls-134{fill:#768391;}.cls-134,.cls-136,.cls-160{opacity:.47;}.cls-135{fill:#34485b;}.cls-136{fill:#758290;}.cls-137{fill:#f4f5f6;}.cls-137,.cls-172,.cls-185{opacity:.04;}.cls-138{fill:#b7bec5;}.cls-139{fill:#eef0f1;}.cls-140{fill:#8d98a3;}.cls-141{fill:#e4e7e9;}.cls-141,.cls-155{opacity:.09;}.cls-142{fill:#838f9b;}.cls-143{fill:#7f8b98;}.cls-144{fill:#ced3d8;}.cls-145{fill:#6e7c8a;}.cls-146{fill:#677685;}.cls-147{fill:#3c4f62;}.cls-148{fill:#5c6c7c;}.cls-149{fill:#32465a;}.cls-150{fill:#73818e;}.cls-151{fill:#cdd2d7;}.cls-152{fill:#47596b;}.cls-153{fill:#5a6a7a;}.cls-154{fill:#798693;}.cls-155{fill:#e5e8ea;}.cls-156{fill:#8f9aa5;}.cls-157{fill:#9fa8b2;}.cls-158{fill:#bbc2c8;}.cls-159{fill:#e3e6e8;}.cls-160{fill:#74818f;}.cls-161{fill:#506172;}.cls-161,.cls-192,.cls-200{opacity:.59;}.cls-162{fill:#eceef0;}.cls-163{fill:#99a3ad;}.cls-164{fill:#f1f2f4;}.cls-165{fill:#687785;}.cls-166{fill:#aab2bb;}.cls-167{fill:#46586a;}.cls-168{fill:#ebedef;}.cls-169{fill:#b3bac2;}.cls-170{fill:#dcdfe3;}.cls-171{fill:#3a4d60;}.cls-172{fill:#f2f3f5;}.cls-173{fill:#4c5d6f;}.cls-174{fill:#415366;}.cls-175{fill:#919ca6;}.cls-176{fill:#c6ccd1;}.cls-177{fill:#dde0e4;}.cls-178{fill:#4a5c6d;}.cls-179{fill:#88949f;}.cls-180{fill:#485a6c;}.cls-181{fill:#a5aeb6;}.cls-182{fill:#fbfbfc;}.cls-183{fill:#bfc5cb;}.cls-184{fill:#a2abb4;}.cls-185{fill:#f3f4f5;}.cls-186{fill:#5d6d7c;}.cls-187{fill:#b4bbc3;}.cls-188{fill:#bac1c7;}.cls-189{fill:#b8bfc6;}.cls-190{fill:#f0f1f3;}.cls-191{fill:#929da7;}.cls-192{fill:#526374;}.cls-193{fill:#acb4bc;}.cls-194{fill:#7d8a96;}.cls-195{fill:#c4cacf;}.cls-196{fill:#3f5264;}.cls-197{fill:#566677;}.cls-198{fill:#9ba5ae;}.cls-199{fill:#788592;}.cls-200{fill:#516273;}.cls-201{fill:#6b7988;}.cls-202{fill:#adb5bd;}.cls-203{fill:#b5bcc3;}.cls-204{fill:#86929d;}</style>
 <linearGradient id="Gradiente_sem_nome_2" x1="4376.57" y1="1952.74" x2="4499.22" y2="1952.74" gradientTransform="translate(-1884.31 -4376.57) rotate(90) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".28" stop-color="#fafafb"/><stop offset=".6" stop-color="#edeef2"/><stop offset=".93" stop-color="#d7dae2"/><stop offset="1" stop-color="#d1d5de"/></linearGradient></defs><g id="Icons"><g><g id="Icon_Base"><g id="Icon"><g id="Sombra"><circle class="cls-204" cx="70.87" cy="75.48" r="55"/><circle class="cls-16" cx="70.86" cy="75.47" r="54.86"/><circle class="cls-5" cx="70.86" cy="75.45" r="54.75"/><circle class="cls-142" cx="70.87" cy="75.42" r="54.61"/><circle class="cls-91" cx="70.86" cy="75.41" r="54.47"/><circle class="cls-76" cx="70.86" cy="75.39" r="54.34"/><circle class="cls-8" cx="70.86" cy="75.37" r="54.22"/><circle class="cls-143" cx="70.86" cy="75.35" r="54.08"/><circle class="cls-22" cx="70.86" cy="74.26" r="46.49"/><circle class="cls-7" cx="70.87" cy="74.22" r="46.36"/><circle class="cls-6" cx="70.87" cy="74.2" r="46.24"/><circle class="cls-79" cx="70.86" cy="74.2" r="46.1"/><circle class="cls-174" cx="70.86" cy="74.18" r="45.97"/><circle class="cls-49" cx="70.87" cy="74.16" r="45.85"/><circle class="cls-196" cx="70.87" cy="74.13" r="45.71"/><circle class="cls-37" cx="70.86" cy="74.13" r="45.58"/><circle class="cls-43" cx="70.86" cy="74.11" r="45.44"/><circle class="cls-147" cx="70.86" cy="74.08" r="45.32"/><circle class="cls-44" cx="70.85" cy="74.05" r="45.19"/><circle class="cls-171" cx="70.86" cy="74.05" r="45.05"/><circle class="cls-23" cx="70.86" cy="74.03" r="44.91"/><circle class="cls-119" cx="70.85" cy="73.99" r="44.8"/><circle class="cls-101" cx="70.85" cy="73.97" r="44.66"/><circle class="cls-115" cx="70.86" cy="73.97" r="44.53"/><circle class="cls-67" cx="70.86" cy="73.95" r="44.41"/><circle class="cls-135" cx="70.86" cy="73.92" r="44.27"/><circle class="cls-111" cx="70.87" cy="73.91" r="44.14"/><circle class="cls-149" cx="70.86" cy="73.89" r="44"/><circle class="cls-26" cx="70.86" cy="73.87" r="43.88"/></g><circle id="Roda" class="cls-209" cx="68.43" cy="61.32" r="61.31"/></g></g><g class="button" id="Icon_Ajuda"><g><g><path class="cls-208" d="M70.57,54.39v9.18c0,1.18-.96,2.14-2.14,2.14h0c-1.18,0-2.14-.96-2.14-2.14v-9.18c-2.18-.41-4.26-1.46-5.94-3.14-4.46-4.46-4.46-11.7,0-16.16,4.46-4.46,11.7-4.46,16.16,0,4.46,4.46,4.46,11.7,0,16.16-1.68,1.68-3.76,2.73-5.94,3.14h0Z"/><line class="cls-208" x1="66.3" y1="54.39" x2="68.15" y2="54.39"/></g><g><path class="cls-208" d="M65.17,39.86c0-2.03,1.86-3.63,3.97-3.19,1.23,.26,2.23,1.25,2.49,2.49,.32,1.53-.43,2.92-1.64,3.58-.97,.52-1.55,1.56-1.55,2.66v1.32"/><path class="cls-208" d="M68.65,49.11c0,.12-.1,.21-.21,.21s-.21-.1-.21-.21,.1-.21,.21-.21,.21,.1,.21,.21Z"/></g></g><g><path class="cls-208" d="M82.2,42.09h4.23c1.74,0,3.15,1.41,3.15,3.15v25.1c0,1.74-1.41,3.15-3.15,3.15H50.44c-1.74,0-3.15-1.41-3.15-3.15v-25.1c0-1.74,1.41-3.15,3.15-3.15h4.17"/><polyline class="cls-208" points="57.65 73.49 55.72 78.35 68.43 78.35 81.15 78.35 79.22 73.49"/><path class="cls-208" d="M86.22,82.04l3.68,6.64c.55,1-.17,2.22-1.31,2.22H48.28c-1.14,0-1.86-1.23-1.31-2.22l3.68-6.64h35.57Z"/></g></g></g></g>
 
<style>
.kenburns-top {
	animation: kenburns-top 5s ease-out both;
}


@keyframes kenburns-top {
  0% {
    transform: scale(1) translateY(0);
    transform-origin: 50% 16%;
  }
  100% {
    transform: scale(1.25) translateY(-15px);
    transform-origin: top;
  }
}

</style></svg>

 

Trying to change the code to respond to mouseover, works fine when opening in browser but not in pbi. The changes wher made only in the style at the bottom of the code.

 

 

I'm new to this svg concept, html and css is also new to me. Thanks in advance for helping
Edit: I had to cut some circles from code, exceeded allowed characters

2 REPLIES 2
KerKol
Power Participant
Power Participant

What visual are you using this code in?

I don't believe event based CSS animations would work in page or shape backgrounds, but they may work in the HTML Content Visual





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!




Hi.

It's not a visual, it's just a background image. Made in adobe and exported to svg format (i just exported part of it to past here the code). It's a home page. This page as the logo company and some icons, and above the icons there will be a button with action linkig to pages with data and visuals.
But the animation works in power bi (import background in svg format), but only works when loading the page. I would like it to have an hover effect.
If you copy past in notepad and save as *.svg and then import you'll see the icon zomming when loading the page. Works fine in desktop an online.
Thank you

Capturar.PNG

Helpful resources

Announcements
Join our Fabric User Panel

Join our Fabric User Panel

This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.

June 2025 Power BI Update Carousel

Power BI Monthly Update - June 2025

Check out the June 2025 Power BI update to learn about new features.

June 2025 community update carousel

Fabric Community Update - June 2025

Find out what's new and trending in the Fabric community.

Top Solution Authors