使用CSS變換懸停時縮放SVG矩形

Question

將懸停在HTML或SVG元素上的CSS變換應用到同一個CSS轉換似乎不會產生相同的效果。正如你在下面的小提琴中看到的那樣，p和rect在縮放時行爲不一樣，這正是我的問題。

http://jsfiddle.net/rKD7T/2/

我怎麼能做出rect行爲完全爲p和規模是否正確？

我試着用矩陣縮放rect - 考慮到原點 - 但它似乎也沒有工作，或者我做錯了。

我想在這裏堅持CSS解決方案，但JS的也可能是一個選項。

感謝您的幫助。

Answer 1

這似乎是正確的。

<div> 
    <p></p> 
    <p></p> 
    <p></p> 
    <p></p> 
</div> 

<svg> 
    <g transform="translate(20, 40)"> 
    <rect x="-20" y="-40" width="50" height="100"/> 
    <g transform="translate(55, 0)" > 
    <rect x="-20" y="-40" width="50" height="100"/> 
    </g> 
    <g transform="translate(110, 0)" > 
    <rect x="-20" y="-40" width="50" height="100"/> 
    </g> 
    <g transform="translate(165, 0)" > 
    <rect x="-20" y="-40" width="50" height="100"/> 
    </g> 
    </g> 
</svg> 

在Firefox trunkIt works但似乎並沒有與Firefox 16.我沒有測試過的Firefox Beta或Aurora在什麼時候它是固定的，看工作。