Есть ли способ заставить Firefox определить происхождение преобразования пути SVG относительно самого пути, а не SVG?

Question

Я пытаюсь использовать CSS для вращения SVG-пути, и я не могу заставить его работать правильно в Firefox.

Вот мои стили:

path { 
    transform-origin: 50% 50%; 
    animation: spin 1s linear 0s infinite; 
} 

Это работает в Chrome, но не Firefox. В Firefox анимация работает, но происхождение относительно SVG viewbox, а не самого пути. Я узнал, что this is apparently correct, но почему? Почему пути SVG ведут себя иначе, чем каждый другой элемент HTML? Это просто кажется интуитивным.

Единственное альтернативное решение я нашел является вычисление фактического происхождения с помощью width и height в ViewBox и width, height, x и y координаты пути, а затем с использованием фиксированного значения пикселя. Хотя это работает, это не так удобно или практично, как решение Chrome. На самом деле, мой путь даже не имеет атрибутов x или y. Это положение описано в атрибуте d, поэтому, используя этот конкретный путь, я даже не знаю, как это сделать.

Есть ли способ заставить Firefox определить происхождение относительно пути, а не SVG? Возможно, полипол или что-то еще? Я действительно хотел бы выполнить это, используя простой метод, который поддерживает Chrome.

Answer 1

Почему пути SVG ведут себя иначе, чем каждый другой элемент HTML?

Две причины:

1. SVG элементы не являются HTML элементы, и не подчиняются тем же правилам.
2. Определенное поведение согласуется с тем, как процентные координаты работают в других местах в SVG.

Новое свойство называется transform-box было предположено, что позволит вам изменить поведение transform-origin как для HTML и SVG.

Если и когда браузеры поддерживают эту новую собственность, вы будете иметь возможность получить поведение, соответствующее поведение тока в Chrome с помощью:

transform-box: fill; 

FF уже реализована, но она не включена по умолчанию пока (НАСКОЛЬКО МНЕ ИЗВЕСТНО).

Теперь вам нужно будет вычислить координаты центра самостоятельно. Или, альтернативно, перестройте свой SVG, чтобы путь был центрирован по началу координат и использовал комбинацию преобразований для вашего вращения.

Например:

.mypath { 
 
    fill: red; 
 
    animation: spin 1s linear 0s infinite; 
 
} 
 

 
@-webkit-keyframes spin { 
 
    from { -webkit-transform: rotate(0deg); } 
 
    to { -webkit-transform: rotate(360deg); } 
 
} 
 
@keyframes spin { 
 
    from {transform:rotate(0deg);} 
 
    to {transform:rotate(360deg);} 
 
}

<svg width="400px" height="400px"> 
 
    <g transform="translate(200,200)"> 
 
    <!-- path centred on (0,0) --> 
 
    <path d="M -100,-100 L 100,-100 100,100 -100,100 Z" class="mypath"/> 
 
    </g> 
 
</svg>