0
我有一個SVG,我用它作爲一種交互式平面圖。當您將鼠標懸停在平面圖的不同區域時(<g> elements
),它們會在其他區域上方展開並浮動。元素的縮放由CSS觸發,但是爲了使懸停區域出現在其他區域上方,我使用jQuery將元素附加到SVG的底部。懸停樣式和轉換不適用於Firefox中的附加元素
這適用於Chrome,但不適用於Firefox。你能幫我嗎?
的代碼實際上超過了這個問題的字數限制,所以我不能添加一個片段,but I'm made a pen here for you to look at.
這裏是代碼的重要位:
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>
我試圖在網上找到一些答案,但我發現最有用的東西是this previous question,我認爲這是朝着正確方向邁出的一步,所以希望它幫助。
謝謝,但你仍然失去正常狀態之間的過渡和徘徊,如果在該鏈路的解決方案是正確的,我不會問。 – Liam
此外,您的解決方案與Chrome中的transform-origin混淆 – Liam
我沒有試圖解決所有問題。只是阻止Firefox中的懸停效果。無論如何,你需要修正你的'變形原點',因爲你依靠Chrome中的一個bug來讓房間從中心擴展。正因爲如此,'transform-origin'的百分比值不可取。我建議你切換到絕對像素值而不是百分比。 –