Question

在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相关的问题吗？这是我能解决的问题吗？

Answer 1

Michael Mulanny建议的解决方法：在SVG中应用转换。

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

......其中250是SVG宽度的50％。

转换不一样（SVG没有rotateX，rotateY或rotateZ）但结果看起来相同。

感谢您报告错误。

CSS转换后的内联SVG不会触发Chrome中的事件处理程序

1 个答案: