svg преобразование системы координат

[vaskes]

Приветствую всех! Eсть проблема. Когда задаешь svg свойство transform="rotate, scale, .....", это свойство создаёт новую действующую систему координат SVG-элемента. Расскажите, как вы с этим боретесь и боретесь ли вообще. Для иллюстрации . В примере когда применяется hover, кружок улетает, как сделать так что бы он остался на месте и просто повернулся на 45deg

Edited February 2, 2016 by vaskes

[vaskes]

Ответ найден спасибо Юлии Бухваловой 

 

Проблема в другом: в отличие от HTML-элементов, центр трансформации по умолчанию находится в верхнем левом углу системы координат, то есть 0 0, а не 50% 50%. Вы задали центр вращения 50% 50%, но после этого сместили фигуру вправо и вниз, используя X и Y — это не трансформация, поэтому координатная сетка элемента осталась прежней, и центр вращения по-прежнему находится посередине SVG-документа (поэтому иконка улетает по наведению). Если вы хотите и дальше использовать смешение с помощью X и Y, вам придется учитывать их, задавая transform-origin (с учётом смещения он будет таким: transform-origin: 418px 318px).

В этом случае вместо X и Y лучше воспользоваться трансформациями, потому что при трансформации элемента вместе с ним сдвигается и вся система его координат, и центр вращения тоже. Вы сможете по-прежнему использовать значение 50% 50% без необходимости высчитывать его каждый раз. Чтобы смещение не конфликтовало с трансформацией по наведению, понадобится внешний элемент.

Кстати, Firefox до сих пор не понимает transform-origin: 50% 50% внутри SVG, так что всё равно понадобится задать центр вращения в пикселях.

 

Yulya Buhvalova

 

преобразование систем координат

демо