Вертикальное выравнивание svg path?

Question

[Vadim Bogomazov]

Доброго времени суток!

В продолжение к предыдущему вопросу: как в данном случае сделать так, чтобы при клике на открыть "дырка" svg path оставалась по центру экрана?

Ссыль

Спасибо!

Comments

[Nikolay Talanov]

Можете пояснить что-то конкретно меняется после клика? По виду идет изменение scale свг, но через инспектор не могу найти изменений почему-то.

[Nikolay Talanov]

Кажется понял, у вас у родительского дива меняется ширина. Делать надо по другому явно, уж точно не изменением ширины.

[Vadim Bogomazov]

Да, через изменение ширины, пробовал зумить через scale, но тоже безуспешно

[Nikolay Talanov]

В общем у вас там во первых кривое свг (в плане позиционирования по центру) и во вторых манипуляции надо проводить непосредственно с самим элементом в свг к которому применяется маска. Для него надо вычислить transform-origin (FF/IE не дружат с % значениями, а для ие вообще надо атрибутом задавать) и затем юзать скейл. Если не хотите костылять, то юзайте gsap TweenLite с простенькими плагинами впридачу. Он все это дело лечит.

[Vadim Bogomazov]

Спасибо за инфу, попробую погуглить

Answer 1

[Петр]

Так вы сам svg элемент выравнивайте по центру.
Это будет проще, чем делать расчеты translate для path.