3

Нужно сделать 4 отдельных элемента (!важно, чтобы при наведении на каждый анимация была именно для него). Сделать так, чтобы не зависело от размера экрана, чтобы виджет можно было делать любого размера и был родитель div (Корневой элемент, размер которого я установлю сам, а размеры, паддинги, маргины дочерних элементов установятся автоматически)


UPD

В ответе дали подсказку что можно управлять svg path как обычным DOM элементом. Как это можно сделать (P.S. У меня в теге svg моего объекта нет некоторых тегов, вроде fill, да и вообще каждый path содержит набор цифр сохранил из Adobe Illustrator)

Пример того, что должно выйти

8
  • Почему именно div? Гораздо проще сделать то же самое через svg. Делается svg с 4 элементами + анимация по вашему вкусу через css+js svg элемент, в вашем случае каждый пазл, будет представлен тегом <path>. Это практически обычный dom–элемент и можете делать с ним что вам нужно. Единственные отличия в вашем случае это при использовании css для svg элементов используются другие атрибуты, к примеру, background-color анналог в svg fill.
    – fens
    Commented 13 сент. 2016 в 4:09
  • Для каждой из 4 паззл отдельная аминация нужна по ховеру
    – IC_
    Commented 13 сент. 2016 в 4:54
  • Как уже писали ранее, ваш ответ ответа не содержит. Можно по конкретнее, как именно мне выделить все path из svg? Как ими манипулировать и т.п.
    – IC_
    Commented 15 сент. 2016 в 13:13
  • Вот решение задавая размер элементу div с классом .parent-puzzle вы будете получать нужный вам размер элементов думаю отрись-ка конкретно пазлов у вас проблем вызвать не должна для данных целей существует куча свободного софта.
    – fens
    Commented 15 сент. 2016 в 19:49
  • @fens это не работает для анимации вроде animate({ top: -10+'px'}, 500);
    – IC_
    Commented 16 сент. 2016 в 0:40

1 ответ 1

7
+50

Можно давать id каждому пути, либо переиспользовать из общего svg. Анимация для путей возможна css transform translate:

svg {
  fill: green
}
.puzz {
  transition: all .4s
}
.puzz:hover {
  fill: red;
  transform: translate(0, -5px) scale(1.1);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
  <defs>
    <path d="M 0 0 L 0 80 L 80 80 L 80 0 Z" id="puzz" />
  </defs>
</svg>

<div class="puzzle">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
    <use x="0" y="0" xlink:href="#puzz" class="puzz" />
    <use x="90" y="0" xlink:href="#puzz" class="puzz" />
    <use x="0" y="90" xlink:href="#puzz" class="puzz" />
    <use x="90" y="90" xlink:href="#puzz" class="puzz" />
  </svg>
</div>

Можете каждому use задать свой id и анимировать его персонально.

9
  • Спасибо. Хороший ответ. Только нужно еще изменение размера для каждого по ховеру, как это сделать?
    – IC_
    Commented 16 сент. 2016 в 11:49
  • Исправил в ответе. scale но тут сбивается центр, надо играться с transform-origin либо действительно раскидать все по отдельным дивам и уже им давать все трансформации. Тем более вам придется скорее всего так-же менять z-index Commented 16 сент. 2016 в 11:53
  • а через атрибут никак нельзя? Я просто всё это в jquery загоняю и css анимировать через него не получается.
    – IC_
    Commented 16 сент. 2016 в 12:02
  • css сам анимируется у меня в примере, вы в jquery можете менять стиль вроде .css({'transform': 'scale(1.1)'}); но еще раз советую вам раскидать по дивам Commented 16 сент. 2016 в 12:05
  • мне нужно .animate({'transform': 'scale(1.1)'}, 400) - не работает.
    – IC_
    Commented 16 сент. 2016 в 12:08

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.