Настройка преобразования-происхождения в группе SVG не работает в Firefox

Я пытался повернуть простую графику svg cog вокруг ее центральной точки, используя переход CSS. У меня была та же проблема, что и у вас с Firefox; преобразование-происхождение, казалось, не имело никакого эффекта.

Решение состояло в том, чтобы нарисовать исходную форму svg так, чтобы ее центр находился в координатах 0, 0:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</svg>

Затем добавьте группу вокруг него и переведите в нужное положение:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
    </g>
</svg>

Теперь вы можете применять переходы css, которые должны работать в Firefox (я добавляю класс к HTML-тегу с помощью JavaScript на основе действий пользователя (js-rotateObject) и использую Minimizr, чтобы проверить, может ли браузер обрабатывать преобразования и переходы (.csstransforms.csstransitions):

#myObject{
    transform: rotate(0deg);
    transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject{
    transform: rotate(360deg);
}

Надеюсь, это поможет.

Начиная с Firefox 55 (выпущенного 8 августа 2017 г.) свойство CSS «transform-box» теперь поддерживается. Установка для него значения «fill-box» будет имитировать настройку Chrome в отношении преобразования-происхождения в деревьях SVG.

transform-origin: center; /* or transform-origin: 50% */
transform-box: fill-box;

Обновление 2017-9-14

Вы можете выбрать элементы, которые вам нужны, в структуре SVG или, как указывает Том в комментариях, вы можете просто применить их ко всем потомкам элемента SVG (при условии, что стиль не мешает чему-либо еще, что вы пытаетесь изменить). достигать):

svg .my-transformed-element {
    transform-origin: center; /* or transform-origin: 50% */
    transform-box: fill-box;
}

or

svg * {
    transform-origin: center; /* or transform-origin: 50% */
    transform-box: fill-box;
}

Ответ @PatrickGrey отлично сработал для меня, но мне нужно было обработать гораздо более сложный SVG с несколькими путями. Я смог выполнить это исправление с помощью Inkscape, но это был многоэтапный процесс. Я рекомендую делать это с открытым XML-редактором Inkscape, чтобы вы могли наблюдать, что происходит.

1. Выберите элементы, которые хотите преобразовать, и выберите Объект > Группировать, чтобы создать новую группу. Перетащите эту группу так, чтобы она находилась в центре левого верхнего угла документа. Это применяет атрибут transform="translate(…, …)" к группе.

2. Выберите в меню Объект > Разгруппировать. Это «сгладит» атрибут преобразования, применяя любые преобразования координат к элементам в группе.

3. Исходные элементы все равно должны быть выбраны. Выберите Объект > Группировать, чтобы вернуть их в группу. Если вы используете CSS для преобразования элементов, добавьте в эту группу свой атрибут ID или class (для этого пригодится редактор XML, или вы можете изменить идентификатор группы, щелкнув его правой кнопкой мыши и выбрав Свойства объекта< /em>. Классы должны быть добавлены через редактор XML или позже в вашем текстовом редакторе.).

4. Выбрав группу, снова выберите Объект > Группа. Это создает новую группу вокруг исходной группы.

5. Перетащите эту новую группу в нужное место в документе. Если вы просмотрите DOM с помощью редактора XML, вы увидите, что transform="translate(…, …)" добавлено в группу outer.

6. Любые преобразования CSS теперь можно применять к группе inner, и они будут последовательно обрабатываться Chrome и Firefox.