0

Chrome で CSS を使用して SVG を変換すると、インライン SVG のポリゴンとテキスト要素に関連付けられたイベントが常にトリガーされるとは限りません。

<script>
$(function() {
$('polygon, text').on('click', function(e) {
    $('#text').html(Math.random());
});
});
</script>

<style>
svg {
    width: 200px;
    height: 200px;
}
#test1 svg {
    -webkit-transform: rotateZ(30deg) rotateY(-35deg) rotateX(45deg);
    transform: rotateZ(30deg) rotateY(-35deg) rotateX(45deg);
}
</style>

問題を再現する完全なフィドルを参照してください: http://jsfiddle.net/qLCV3/

SVG の任意の場所をクリックしてみてください。クリックすると、ページの上部にある乱数が更新されますが、Chrome では常に更新されるとは限りません。

Firefox では問題なく動作します。これは Chrome 関連の問題ですか? これは私が修正できるものですか？

4

1 に答える 1

0

Michael Mulanny によって提案された回避策: SVG で変換を適用します。

$('g').attr('transform', 'translate(250, 0) scale(1, .58) rotate(45)');

... 250 は SVG の幅の 50% です。

変換は同じではありませんが (SVG には、rotateX、rotateY、rotateZ はありません)、結果は同じに見えます。

バグを報告していただきありがとうございます。

于 2013-11-07T21:50:14.637 に答える