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

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

демо

добавте к атрибутам основного svg два отрибута viewBox="0 0 width height" preserveAspectRatio="xMidYMid meet" так же для ваших вложенных path c отрисовками полей добавтье четкие координаты. Проще все это отрисовать сначала в каком нибудь векторном редакторе, исходную картинку и нарисовав поверх неё ваши hover, a потом добавить атрибуты которые я выше упомянул. Естественно width и height меняются на ваши. Значения "xMidYMid" в атрибуте preserveAspectRatio, обозначают откуда будуте расчитываться масшатабирование, "mee" это тип масштабирования. Если я правильно понял проблему, это должно помочь. 

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

С помощью border. Ступеньки все равно есть, но не так заметны.

Спасибо! А можно как то вообще этого избежать? Я в как то в svg столкнулся с подобной проблемой, там помог атрибут 

shape-rendering='auto'

Может и у transform есть какое нибудь свойство, которое поможет корректно отрендерить linear-gradient и border.

Приветствую всех. Есть заголовок который с двух сторон обрамляется линиями. Линии сделаны с помощью linear-gradient. При трансформации блока (transform: skewX(10deg)) линия становиться ступенчатой. Я подозреваю, что проблема кроется в отрисовке linear-gradient в браузере, но четкого понимания почему так происходит у меня нет.

Как бы вы реализовали данный блок и почему?

ссылка на codepen для более наглядной иллюстрации проблемы.

зарание спасибо!

 

 

опера какой версии интересует ?

12.16

 

Но вообще хотелось бы более универсальное решение от 9 и выше, если конечно такое возможно.

 

тогда только js

 

Спасибо.

опера какой версии интересует ?

12.16

Но вообще хотелось бы более универсальное решение от 9 и выше, если конечно такое возможно.

Здравствуйте все. Очень буду признателен за любую помощь.

есть такой тег:

<input type="range" min="0" max="100" step="1" value="50" />

Каким образом можно полностью изменить его отобржение в браузере Opera, не используя JS ?

А мне http://everstudent.r...rs-to-memorize/ описание больше нравится.

Доходчиво, спасибо!

http://htmlbook.ru/s...stnye-selektory

http://htmlbook.ru/s...ednie-selektory

http://htmlbook.ru/s...ernie-selektory

Ну и так далее

Спасибо большое за направление!

Здравствуйте! Сразу прошу прощения если данная тема уже обсуждалось на форуме. Поиском пользовался не нашел ответа. И честно говоря даже не представляю как задать вопрос правильно. Проблема в следующем, есть следующие css конструкции:

скажите что делают ">" "~" "+" данные символы в этих конструкциях или направте где про них можно почитать.