Forum Discussion

StefanKoler-a6f's avatar
StefanKoler-a6f
Community Member
2 years ago

SVG - hover not working

I created a simple SVG in Illustrator and added a little CSS (:hover).
The hover effect works when I view the SVG in a browser, but stops working after I import it into a storyline project.

Does anyone know why this is happening?

And if there is someone here that could give me a hint, how to change the fill of #z1 and #t1 when the mouse is moved over #a1 - allthough this has nothing to do with Storyline - that would be awesome :-)

  • Basically imported SVGs are converted to images and tough to manipulate. So you need to copy/paste the SVG from Illustrator ( only works on Windows ) and paste that into Storyline. Then you can ungroup the .emf and the shapes you can target with code.

  • I forgot to attached the storyline-project as well as the SVG code:

     

    <svg id="auswahl" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 601 395">
    <defs>
    <style>

    .cls-1 {fill: grey}
    .cls-2 {fill: green}
    .cls-3 {fill: blue}
    #a1:hover {fill: white;}
    #a1:hover ~ #t1 {fill: red;}
    #a1:hover ~ #z1 {fill: red;}




    </style>
    </defs>

    <g id="a3">
    <rect class="cls-1" x="174" y="110" width="128" height="98"/>
    </g>
    <g id="a2">
    <rect class="cls-1" x="344" y="120" width="128" height="98"/>
    </g>
    <g id="a1">
    <rect class="cls-1" x="473" y="120" width="128" height="98"/>
    </g>
    <g id="t3">
    <rect class="cls-3" x="195" width="128" height="98"/>
    </g>
    <g id="t2">
    <rect class="cls-3" x="325" y="0" width="128" height="98"/>
    </g>
    <g id="t1">
    <rect class="cls-3" x="455" y="0" width="128" height="98"/>
    </g>
    <g id="z3">
    <rect class="cls-2" x="2" y="97" width="128" height="98"/>
    </g>
    <g id="z2">
    <rect class="cls-2" x="1" y="197" width="128" height="98"/>
    </g>
    <g id="z1">
    <rect class="cls-2" y="297" width="128" height="98"/>
    </g>

    </svg>