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

【问题标题】：CSS-transformed inline SVG not triggering event handler in ChromeCSS 转换的内联 SVG 未在 Chrome 中触发事件处理程序
【发布时间】：2013-11-18 12:07:06
【问题描述】：

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

【问题讨论】：

我以前见过类似的错误。尝试在 SVG 中进行转换。
现在报告为code.google.com/p/chromium/issues/detail?id=316093
我遇到了同样的问题。我在这里做了一个更简单的测试用例：jsfiddle.net/qLCV3/2

标签： css google-chrome svg transform

【解决方案1】：

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

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

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

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

感谢您报告错误。

【讨论】：