CSS-преобразованный встроенный SVG, не запускающий обработчик событий в Chrome

97
10

События, связанные с встроенным 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? Я могу это исправить?

спросил(а) 2021-01-19T14:23:16+03:00 2 месяца, 3 недели назад
1
Решение
86

Обходное решение, предложенное Майклом Муланни: примените преобразование в SVG.

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

... где 250 составляет 50% от ширины SVG.

Преобразования не совпадают (нет rotateX, rotateY или rotateZ для SVG), но результат выглядит одинаково.

Спасибо за сообщение об ошибке.

ответил(а) 2021-01-19T14:23:16+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема