CSS-преобразованный встроенный SVG, не запускающий обработчик событий в Chrome
События, связанные с встроенным SVG-полигоном и текстовыми элементами, не всегда запускаются после того, как SVG был преобразован с помощью CSS в 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>
См. Полный скрипт, воспроизводящий проблему: http://jsfiddle.net/qLCV3/
Попробуйте щелкнуть в любом месте SVG. Любой клик должен обновлять случайный номер в верхней части страницы, но он не всегда находится в Chrome.
Он отлично работает в Firefox. Это проблема, связанная с Chrome? Я могу это исправить?
Обходное решение, предложенное Майклом Муланни: примените преобразование в SVG.
$('g').attr('transform', 'translate(250, 0) scale(1, .58) rotate(45)');
... где 250 составляет 50% от ширины SVG.
Преобразования не совпадают (нет rotateX, rotateY или rotateZ для SVG), но результат выглядит одинаково.
Спасибо за сообщение об ошибке.