Нужно сделать 4 отдельных элемента (!важно, чтобы при наведении на каждый анимация была именно для него). Сделать так, чтобы не зависело от размера экрана, чтобы виджет можно было делать любого размера и был родитель div
(Корневой элемент, размер которого я установлю сам, а размеры, паддинги, маргины дочерних элементов установятся автоматически)
UPD
В ответе дали подсказку что можно управлять svg path
как обычным DOM
элементом. Как это можно сделать (P.S. У меня в теге svg моего объекта нет некоторых тегов, вроде fill, да и вообще каждый path
содержит набор цифр сохранил из Adobe Illustrator)
<path>
. Это практически обычный dom–элемент и можете делать с ним что вам нужно. Единственные отличия в вашем случае это при использовании css для svg элементов используются другие атрибуты, к примеру,background-color
анналог в svg fill.path
изsvg
? Как ими манипулировать и т.п.animate({ top: -10+'px'}, 500);