css - CSS 转换的内联 SVG 未在 Chrome 中触发事件处理程序

Question

一旦 SVG 在 Chrome 下使用 CSS 进行转换，附加到内联 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）但结果看起来相同。

感谢您报告错误。