1

ホバー時に同じ CSS 変換を HTML または SVG 要素に適用しても、同じ効果が得られないようです。次のフィドルでわかるように、pとrectはスケーリング中に同じように動作しません。これがまさに私の問題です。

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

rectを正確に動作させp、適切にスケーリングするにはどうすればよいですか?

rect原点を考慮して、マトリックスで をスケーリングしようとしましたが、どちらも機能していないようでした。または、間違っていました。

ここでは CSS ソリューションに固執したいと思いますが、JS ソリューションもオプションになる可能性があります。

ご協力いただきありがとうございます。

4

1 に答える 1

2

これはほぼ正しいようです。

<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トランクでは動作しますが、Firefox 16 では動作しないようです。Firefox BetaまたはAuroraをテストして、修正時期を正確に確認していません。

于 2012-11-01T14:31:45.750 に答える