Почему свойство transform-origin не работает для rotate() внутри svg-изображения?

Question

[Влад]

Необходимо повернуть объект внутри svg-изображения относительно указанной в свойстве transform-origin точки.

Вот я по-быстрому набросал 2 варианта:
1) На чистом CSS всё работает корректно
2) C svg работает некорректно

Как с этим бороться?

Comments

[Влад]

Пардон. В первом случае почему-то тоже не совсем корректно. Объект #book должен поворачиваться относительно правой нижней точки как при наведении мышью на контейнер, так при mouseout, а поворачивается корректно только при :hover.

Answer 1

[Ivan Bogachev]

В SVG условный transform-origin всегда находится в координатах (0,0) координатной плоскости. Его нельзя изменить. Если мы пытаемся задать его в CSS, то логика работы трансформаций в CSS входит в явный конфликт с логикой работы трансформаций в SVG, и там каждый браузер интерпретирует происходящее на свой вкус (тут есть старая, но все еще годная статья по теме). В последние годы, со всеми этими сменами движков у браузеров, вкусы начинают двигаться в одну сторону, но бардак все еще присутствует. Но всегда можно сделать старую добрую матрешку:

<!-- 90 = x + width, 168 = y + height - правый нижний угол книги -->
<g transform="translate(90, 168.5)">
    <g id="book">
        <rect class="fil0 str0" x="60" y="18.5" width="30" height="150" transform="translate(-90, -168.5)" />
    </g>
</g>

Убираем transform-origin из CSS, чтобы не было конфликтов, смещаем нужный центр трансформации в координаты (0, 0), применяем там трансформацию, смещаем обратно, где он должен быть.

Comments

[Влад]

Спасибо. Буду знать про такую матрёшку.

А почему в первом случае без svg объект book некоректно возвращается в первоначальное положение хотя я прописал transform-origin: 100% 100%; ?

https://codepen.io/vlad-tarasoffka/pen/eYjKMaj

[Ivan Bogachev]

А почему в первом случае без svg объект book некоректно возвращается в первоначальное положение хотя я прописал transform-origin: 100% 100%; ?

Влад, вы transform-origin задаете только для состояния :hover. Вполне логично, что оно не применяется для состояния "не-hover".

[Влад]

Ivan Bogachev, Ой, глупый вопрос задал )) сорри, другим занят сильно )