Увеличьте путь SVG

Question

Увеличьте путь SVG

0

У меня есть эта карта штата Пенсильвания, над которой я работаю. В настоящее время у меня выделено несколько округов, и при наведении на него отображаются имена графств. Я хотел бы добавить небольшое увеличение масштаба при зависании. Но когда он установлен, он перемещает весь путь.

Вот URL, чтобы показать, что происходит. Когда вы наводите на себя внимание, вы заметите проблему, что с применением шкалы 1.2 при наведении:

http://ryanharris.works/d/testmap.html

Есть ли способ масштабировать путь, но держать его в одном месте? Я не слишком хорошо знаком с SVG, так как это мой первый практический проект.

Любые рекомендации очень ценятся

RyGuy 06 авг. 2014, в 17:11

Источник

0

Есть несколько способов, которые я знаю: определить начало преобразования в центре каждого элемента или <g>, преобразовать -x, -y и scale или преобразовать матрицу с помощью -cx, -cy. Raphael.js помог мне с такими вещами. Raphaeljs.com/pie.html
Tank 06 авг. 2014, в 15:00

Теги:

html

css3

svg

hover

1 ответ

Ещё вопросы

Есть несколько способов, которые я знаю: определить начало преобразования в центре каждого элемента или <g>, преобразовать -x, -y и scale или преобразовать матрицу с помощью -cx, -cy. Raphael.js помог мне с такими вещами. Raphaeljs.com/pie.html

Allan Raquin · Accepted Answer · 2014-08-06T13-53-00.000Z

Взгляни на

transform : scale(...);
transform-origin: ... ;

(Необходимо иметь префикс)

трансформация происхождения была ключом! Спасибо @ lateek35