Firefox hover effect on SVG image element not working

Question

Attempting to make an interactive SVG map. When one of the image elements is hovered over it should increase in size from 20px to 50px. Here is an example of what I'm trying to do:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="_x2014_1" x="0" y="0" version="1.1" viewBox="44.524925231933594 246.8045654296875 1111.1861572265625 608.7947998046875"><style>.st1{fill:#000000}</style>
  <g clip-path="url(#SVGID_3_)">
    <image x="207" y="408" href="https://picsum.photos/200/300" class="map_icon_small"></image>
    <image x="227" y="500" href="https://picsum.photos/200/300" class="map_icon_small"></image>
    <image x="395" y="658" href="https://picsum.photos/200/300" class="map_icon_small"></image>
    <image x="345" y="705" href="https://picsum.photos/200/300" class="map_icon_small"></image> 
  </g>
</svg>

.map_icon_small{
    width:20px;
    transition: width 0.25s;
}
.map_icon_small:hover{
    width:50px;
}

https://jsfiddle.net/x24dnjat/

This works in chrome/edge/safari, but in firefox nothing happens on mouse hover. I've attempted to play around with other suggestions like pointer-events, changing the to a path, and numerous others to no avail. I'm not sure if it's just not supported or if there's another method of making an element interactive on an SVG.

Your example actually works fine in current firefox versions. But maybe your complete svg contains issues (e.g. duplicate Ids or overriding styles etc.) — herrstrietzel, Commented Dec 16, 2022 at 12:35

Francis · Accepted Answer · 2022-12-16 10:32:27Z

0

I had a similar problem with an SVG image that I had taken from an existing file and edited in Illustrator. In the original, the :hover class worked. On the new file, the :hover class was working on Chrome, but not on Firefox. It turns out that depending on the SVG format you select when saving, Illustrator adds in lots of stuff that can be detrimental to CSS in some circumstances.

A quick passage by https://svgomg.net/ solved the problem.

answered Dec 16, 2022 at 10:32

Francis

76210 silver badges21 bronze badges

Add a comment |

Francis · Accepted Answer · 2023-01-31 13:22:16Z

@ o17t H1H' S'k

If you are interested in the exact circumstance that triggered the bug, here is a combination of html page + svg file that works in Chrome but remains inert in Firefox.

Html page:

<style>
.rotate_cog:hover {
width:20px
}
.rotate_cog {
width:200px
}
</style>
<img  class="rotate_cog" src="axway_web_site2.svg"></img>

Svg file (probably generated by Illustrator) :

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 391 163" style="enable-background:new 0 0 391 163;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#F3F3F3;}
    .st1{fill:#4A4F54;}
    .st2{fill:#F3ECE3;}
    .st3{fill-opacity:0;stroke:#FF2424;stroke-width:0.27;}
    .st4{fill:#FF2424;}
    .st5{fill:#FFFFFF;}
    .st6{fill-opacity:0;stroke:#4A4F54;stroke-width:0.27;}
</style>
<g transform="matrix(1,0,0,1,195.5,59.521995544433594)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st0" d="M195.5-59.5v119h-391v-119H195.5z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,135.66000366210938,29.711997985839844)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st1" d="M119.4,68h-8v-65c0-1.7-1.4-3.1-3.1-3.1h-97c-1.7,0-3,1.4-3,3.1v65H0.2C0.1,68,0,68.1,0,68.2v1.4
            c0,0,0,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0l5.7,1.3c1,0.2,2.1,0.4,3.2,0.4h101.6c1.1,0,2.1-0.1,3.2-0.4l5.7-1.3c0.1,0,0.1,0,0.1,0
            c0,0,0.1-0.1,0.1-0.1v-1.4C119.6,68.1,119.5,68,119.4,68z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,92.79100036621094,29.711997985839844)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st2" d="M0,61.1L102.7,0l102.7,61.1l-102.7,61.1L0,61.1z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,161.26100158691406,70.43299865722656)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st3" d="M-51.4,30.5L51.4-30.5"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,178.3489990234375,80.62199401855469)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st3" d="M-51.3,30.5l102.7-61"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,195.5,90.78399658203125)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st3" d="M-51.4,30.5L51.4-30.5"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,212.5709991455078,100.99099731445312)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st3" d="M-51.3,30.5l102.6-61"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,229.7570037841797,111.06500244140625)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st3" d="M-51.4,30.6L51.4-30.6"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,161.2340087890625,111.09199523925781)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st3" d="M-51.3-30.6L51.3,30.6"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,178.3489990234375,101.00799560546875)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st3" d="M-51.3-30.5l102.7,61"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,195.43800354003906,90.81900024414062)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st3" d="M-51.3-30.6L51.3,30.6"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,212.5709991455078,80.65699768066406)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st3" d="M-51.3-30.5L51.3,30.5"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,229.77499389648438,70.44999694824219)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st3" d="M51.4,30.5l-102.8-61"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,92.79199981689453,90.79299926757812)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M0,0v10.2l102.7,61.1V61.1L0,0z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,195.5,90.79299926757812)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st1" d="M0,71.2l102.7-61.1V0L0,61.1V71.2z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,127.02200317382812,60.28799819946289)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M17.1,0l17.1,10.2L17.1,20.4L0,10.2L17.1,0z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,144.1540069580078,70.48600006103516)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st1" d="M0,10.2v20.4l17.1-10.2V0L0,10.2z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,127.02200317382812,70.48600006103516)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M0,0v20.3l17.1,10.2V10.2L0,0z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,131.96200561523438,81.28199768066406)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st1" d="M0,2.4L1.8,0l3.6,2.1l1.8,4.5L5.5,8.9l-3.7-2L0,2.4z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,144.2080078125,19.110000610351562)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st5" d="M0.1,71.4h102.6V0H0L0.1,71.4z"/>
        <path class="st3" d="M0.1,71.4h102.6V0H0L0.1,71.4z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,195.53599548339844,24.040996551513672)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st5" d="M-51.3,0H51.3"/>
        <path class="st3" d="M-51.3,0H51.3"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,174.0489959716797,29.342994689941406)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M0,2.6L4.3,0l4.3,2.6L4.3,5.1L0,2.6z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,178.33099365234375,31.89699935913086)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st1" d="M4.3,0v5.1L0,7.6V2.5L4.3,0z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,174.04800415039062,31.89699935913086)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M4.3,7.6L0,5.1V0l4.3,2.5V7.6z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,174.0489959716797,49.737998962402344)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M0,2.5L4.3,0l4.3,2.5L4.3,5.1L0,2.5z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,178.33099365234375,52.27399444580078)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st1" d="M4.3,0v5.1L0,7.6V2.6L4.3,0z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,174.04800415039062,52.27399444580078)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M4.3,7.6L0,5.1V0l4.3,2.6V7.6z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,174.0489959716797,70.29199981689453)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M0,2.5L4.3,0l4.3,2.5L4.3,5.1L0,2.5z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,178.33099365234375,72.82799530029297)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st1" d="M4.3,0v5.1L0,7.6V2.6L4.3,0z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,174.04800415039062,72.82799530029297)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M4.3,7.6L0,5.1V0l4.3,2.6V7.6z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,199.7209930419922,31.89599609375)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st6" d="M-12.8,0h25.7"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,199.7209930419922,36.98599624633789)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st6" d="M-12.8,0h25.7"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,199.7209930419922,52.27399826049805)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st6" d="M-12.8,0h25.7"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,199.7209930419922,57.36399841308594)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st6" d="M-12.8,0h25.7"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,199.7209930419922,72.82799530029297)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st6" d="M-12.8,0h25.7"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,199.7209930419922,77.91799926757812)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st6" d="M-12.8,0h25.7"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,148.06500244140625,21.522998809814453)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M0-0.6c0.4,0,0.6,0.3,0.6,0.6S0.4,0.6,0,0.6S-0.6,0.3-0.6,0S-0.4-0.6,0-0.6z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,150.55300903320312,21.522998809814453)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M0-0.6c0.4,0,0.6,0.3,0.6,0.6S0.4,0.6,0,0.6S-0.6,0.3-0.6,0S-0.4-0.6,0-0.6z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,153.04100036621094,21.522998809814453)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M0-0.6c0.4,0,0.6,0.3,0.6,0.6S0.4,0.6,0,0.6S-0.6,0.3-0.6,0S-0.4-0.6,0-0.6z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,233.31100463867188,46.474998474121094)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st1" d="M19.7,15c-0.7,2.8-3.2,4.7-6.1,4.7s-5.4-1.9-6.2-4.6C6.7,12.3,7.9,9.4,10.3,8s5.6-1.1,7.7,0.9
            C19.6,10.5,20.3,12.8,19.7,15 M26.2,8.3c-0.2-0.5-0.6-0.8-1-0.9l-0.4,0.2c-0.6,0.3-1.4,0.3-2,0C22,7.4,21.4,7,20.9,6.4l-0.2-0.2
            L20.5,6c-0.5-0.5-1-1.1-1.2-1.8c-0.3-0.6-0.3-1.4,0-2l0.2-0.4c-0.1-0.5-0.4-0.9-0.9-1c-1-0.4-2-0.7-3.1-0.8
            c-0.5-0.1-1,0.1-1.3,0.5v0.4c-0.1,0.7-0.4,1.3-1,1.8c-0.6,0.5-1.2,0.8-2,1h-0.3l-0.3,0.1C9.8,4,9.1,4,8.3,3.9
            C7.6,3.8,7,3.4,6.6,2.9L6.3,2.5C5.9,2.4,5.3,2.5,5,2.8C4.1,3.5,3.4,4.2,2.7,5.1C2.4,5.4,2.3,5.9,2.4,6.4l0.4,0.2
            c0.6,0.4,1,1.1,1,1.8C4,9.1,4,9.9,3.7,10.6l-0.1,0.3v0.3c-0.2,0.7-0.5,1.4-1,2c-0.4,0.6-1.1,0.9-1.8,1H0.5C0.1,14.5-0.1,15,0,15.4
            c0.2,1.1,0.4,2.1,0.9,3.1C1,19,1.5,19.3,1.9,19.4l0.4-0.2c0.6-0.3,1.4-0.3,2,0c0.7,0.2,1.3,0.7,1.8,1.2l0.2,0.2l0.2,0.2
            c0.5,0.5,1,1.1,1.2,1.8c0.3,0.6,0.3,1.4,0,2L7.6,25c0.1,0.5,0.4,0.9,0.9,1c1,0.4,2,0.7,3.1,0.8c0.5,0.1,1-0.1,1.3-0.5v-0.4
            c0.1-0.7,0.4-1.3,1-1.8c0.6-0.5,1.2-0.8,2-1h0.3h0.3c0.7-0.2,1.5-0.3,2.2-0.1c0.7,0.1,1.3,0.5,1.8,1l0.2,0.3
            c0.5,0.2,1,0.1,1.4-0.3c0.9-0.7,1.7-1.5,2.3-2.3c0.3-0.4,0.4-0.9,0.3-1.4l-0.4-0.2c-0.6-0.4-1-1.1-1-1.8c-0.1-0.7-0.1-1.5,0.1-2.2
            l0.1-0.3v-0.3c0.2-0.7,0.5-1.4,1-2c0.4-0.5,1.1-0.9,1.8-1h0.4c0.4-0.3,0.5-0.8,0.4-1.3C26.9,10.3,26.6,9.3,26.2,8.3"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,195.44700622558594,80.61299896240234)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M17.1,0l17.1,10.2L17.1,20.4L0,10.2L17.1,0z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,212.56100463867188,90.79299926757812)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st1" d="M0,10.2v20.3l17.1-10.2V0L0,10.2z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,195.4459991455078,90.79299926757812)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st4" d="M0,0v20.3l17.1,10.2V10.2L0,0z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,200.38699340820312,101.58899688720703)">
    <g transform="matrix(1,0,0,1,0,0)">
        <path class="st1" d="M0,2.4L1.8,0l3.6,2.1l1.8,4.5L5.5,8.9L1.8,7L0,2.4z"/>
    </g>
</g>
<g transform="matrix(1,0,0,1,195.5,81.01799774169922)">
</g>
<g transform="matrix(1,0,0,1,195.5,81.01799774169922)">
</g>
</svg>

Collectives™ on Stack Overflow

Firefox hover effect on SVG image element not working

2 Answers 2

Not the answer you're looking for? Browse other questions tagged
html
svg
hover
interactive
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Not the answer you're looking for? Browse other questions tagged htmlsvghoverinteractive or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
html
svg
hover
interactive
or ask your own question.