У меня есть следующая анимация SVG (это довольно большой фрагмент, см. «Показать фрагмент кода»):
.logo > .logo-compass-frame {
fill: none;
stroke: black;
stroke-width: 15;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.logo > .logo-compass-north, .logo > .logo-compass-south {
stroke: black;
stroke-width: 8;
stroke-miterlimit: 10;
}
.logo > .logo-compass-south {
fill: none;
}
.logo > .logo-compass-center {
fill: black;
stroke: black;
stroke-width: 3;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.logo > .logo-compass-north, .logo > .logo-compass-south, .logo > .logo-compass-center {
transition: 0.5s ease-in-out;
opacity: 1;
}
.logo:hover > .logo-compass-north, .logo:hover > .logo-compass-south {
transform-origin: center;
}
.logo:hover > .logo-compass-north {
transform: rotate(90deg) scale(1.5) translate(10px);
}
.logo:hover > .logo-compass-south {
transform: rotate(90deg) scale(1.5) translate(-10px);
}
.logo:hover > .logo-compass-center {
opacity: 0;
}<svg class="logo" x="0px" y="0px" viewBox="0 0 272.6 272.6">
<circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8" />
<polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5" />
<polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1" />
<circle class="logo-compass-center" cx="138" cy="136.6" r="5.7" />
</svg>Проблема в том, что он действует по-разному только в Firefox (не тестировался в Edge или IE, так как я работаю в macOS). Для браузеров WebKit и Opera я получаю:
Хром 60.0.3112.90:
Сафари 10.1:
Опера 47.0.2631.39:
Фаерфокс 54.0.1:
Происходит что-то подозрительное. Я не пробовал Edge или IE, так что, может быть, это какая-то проблема соответствия спецификации CSS? Я думал, что transform-origin не поддерживается, так как это экспериментальная технология, но добавление -moz-transform-origin ничего не дало, а MDN сообщает, что transform-origin теперь поддерживается.
Почему переходы ведут себя по-разному в разных браузерах и можно ли это исправить?
