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

一旦在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>

$（函数（）{
$（'polygon，text'）。在（'click'，函数（e）上{
$（'#text'）.html（Math.random（））；
});
});
svg{
宽度：200px；
高度：200px；
}
#test1 svg{
-webkit变换：rotateZ（30度）rotateY（-35度）rotateX（45度）；
变换：rotateZ（30度）rotateY（-35度）rotateX（45度）；
}

请参阅复制问题的完整小提琴：

尝试单击SVG上的任意位置。任何点击都会更新页面顶部的随机数，但并不总是在Chrome下

<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>

它在Firefox下运行良好。

---

这是与Chrome相关的问题吗？这是我可以解决的问题吗？

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

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

。。。其中250是SVG宽度的50%

变换不同（SVG没有rotateX、rotateY或rotateZ），但结果看起来相同

---

感谢您报告此错误。

我以前见过类似的错误。尝试在SVG中进行转换。现在报告，因为我看到了相同的问题。我在这里制作了一个更简单的测试用例：