Utilizing an SVG as an interactive floor plan, I have implemented a feature where hovering over different areas on the floor plan (<g> elements) causes them to expand and float above other areas. The element scaling is triggered by CSS, but I use jQuery to append the hovered area to the bottom of the SVG for it to appear above others.
This functionality works smoothly in Chrome, but unfortunately encounters issues in Firefox. Can someone provide assistance?
The code exceeds the character limit for this question, making it impossible to include a snippet, but I have created a pen for reference.
Here are crucial segments of the code:
CSS:
g.hoverFX {
transition: transform 0.3s linear;
transform-origin: 50% 50%;
transform: scale(1);
}
g.hoverFX:hover {
filter: url(#shadow);
transform: scale(1.1);
}
JS:
jQuery(function(){
jQuery('g.hoverFX').hover(function(e){
jQuery(this).appendTo('svg#Layer_2');
});
});
HTML:
<g class="hoverFX" id="Conference_1_">
<rect x="342" y="206.5" class="st19" width="330.3" height="218.9"/>
<path class="st4" d="M671,207.8V424H343.3V207.8H671 M673.7,205.1h-333v221.6h333V205.1L673.7,205.1z"/>
</g>
<g class="hoverFX" id="Kitchen_1_">
<rect x="674.3" y="206" class="st48" width="161.7" height="219.3"/>
<path class="st4" d="M834.7,207.4V424H675.6V207.4H834.7 M837.3,204.7H672.9v222h164.4V204.7L837.3,204.7z"/>
</g>
<g class="hoverFX" id="Catering_Store_1_">
<rect x="1264.7" y="306.7" class="st20" width="554.7" height="476.3"/>
<path class="st4" d="M1818.4,307.8v474.2h-552.7V307.8H1818.4 M1820.5,305.7h-556.8V784h556.8V305.7L1820.5,305.7z"/>
</g>
<g class="hoverFX" id="Clearance_Store_1_">
<rect x="1112.6" y="180.3" class="st21" width="706.8" height="124.4"/>
<path class="st4" d="M1818.5,181.3v122.4h-704.8V181.3H1818.5 M1820.5,179.3h-708.8v126.4h708.8V179.3L1820.5,179.3z"/>
</g>
<g class="hoverFX" id="Showroom_1_">
<polygon class="st22" points="296.8,783 296.8,426.7 537.7,426.7 837.4,426.8 837.3,180.4 1110.6,180.4 1110.6,306.7 1262.6,306.7
1262.6,783 "/>
<path class="st4" d="M1109.6,181.4l0.1,124.3l0,2.1h2.1h149.9v474.2H297.8V427.8h239.9l298.7,0l2.1,0l0-2.1l-0.1-244.3H1109.6
M1111.6,179.3H836.3l0.1,246.4l-298.7,0H295.7V784h967.9V305.7h-152L1111.6,179.3L1111.6,179.3z"/>
</g>
Despite researching online, I haven't found suitable solutions. However, I came across this related query, which seems like a step in the right direction. Hopefully, it provides some insight.