Html5 Как морфировать или анимировать один SVG другому?

Я сделал несколько поисков, но я должен признать, что у меня есть 0 опыт работы с SVG, я видел кучу современных библиотек, таких как Raphael, PaperJS, KineticJS, EaselJS, но я понятия не имею, что бы соответствовало цели здесь, возможно, даже ключевые ключевые слова CSS могли бы сделать трюк.

Указатели на эту проблему будут очень благодарны.

Цель
В браузере я хочу оживить svg1 в svg2, используя тип перехода ease-out

Ограничения

Любая библиотека javascript, если требуется вообще
Должен быть способен каждый элемент к другому элементу того же идентификатора
формы морфинга, пути, fill *, stroke *, cx, cy, rc, ry
Чтобы работать с текущими Firefox и Chrome, IE 10 было бы неплохо иметь
Должны работать на новых мобильных телефонах, таких как iphone 5, nexus 4 и 7
Достойная производительность даже на мобильных телефонах
Безразлично, если оно отображается как <svg> или <canvas>

svg1:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <linearGradient id="svg_6">
   <stop stop-color="#828236" offset="0"/>
   <stop stop-color="#7d7dc9" offset="0.99219"/>
  </linearGradient>
  <linearGradient id="svg_7" x1="0" y1="0" x2="1" y2="1">
   <stop stop-color="#828236" offset="0"/>
   <stop stop-color="#7d7dc9" offset="0.99219"/>
  </linearGradient>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_1">
   <stop offset="0" stop-color="#828236"/>
   <stop offset="0.99219" stop-color="#7d7dc9"/>
  </linearGradient>
 </defs>
 <g>
  <title>Layer 1</title>
  <ellipse ry="145" rx="116" id="svg_2" cy="201" cx="317" fill-opacity="0.36" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="url(#svg_7)"/>
  <ellipse ry="21" rx="10" id="svg_5" cy="137" cx="274" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#0cd60c"/>
  <ellipse ry="31" rx="17" id="svg_9" cy="114" cx="346" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#0cd60c"/>
  <path id="svg_14" d="m235,239c55.66666,-1.33333 133.33334,-71.66667 167,-4l-167,4z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
 </g>
</svg>

svg2:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <linearGradient id="svg_6">
   <stop offset="0" stop-color="#828236"/>
   <stop offset="0.99219" stop-color="#7d7dc9"/>
  </linearGradient>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_7">
   <stop offset="0" stop-color="#828236"/>
   <stop offset="0.99219" stop-color="#7d7dc9"/>
  </linearGradient>
  <linearGradient id="svg_1" x1="0" y1="0" x2="1" y2="1">
   <stop stop-color="#828236" offset="0"/>
   <stop stop-color="#7d7dc9" offset="0.99219"/>
  </linearGradient>
 </defs>
 <g>
  <title>Layer 1</title>
  <ellipse id="svg_2" fill="url(#svg_7)" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0.36" cx="317" cy="201" rx="116" ry="145"/>
  <ellipse id="svg_5" stroke="#000000" fill="#0cd60c" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="277.5" cy="132.5" rx="13.5" ry="25.5"/>
  <ellipse id="svg_9" stroke="#000000" fill="#0cd60c" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="349.5" cy="110" rx="20.5" ry="35"/>
  <path id="svg_14" fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m235,240c21.66666,81.66669 114.33334,96.33331 167,-4l-167,4z" />
 </g>
</svg>

ps вы можете визуализировать здесь, просто вставив коды в область.

У меня нет кода для показа, я не хотел начинать с неправильного. Моя интуиция подсказывает мне, что существует 50% вероятность того, что лучшее решение не предполагает одновременного перемещения этих узлов по одному!

Ответы

Ответ 1

Насколько я вижу, вы хотите только преобразовать пути

Это хороший учебник: http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG

Спецификация W3C для путей SVG: http://www.w3.org/TR/SVG/paths.html

Спецификация W3C для анимации: http://www.w3.org/TR/SVG/animate.html

Вот пример: http://www.carto.net/svg/samples/path_morphing.shtml

Ответ 2

Следует упомянуть, что 2015 год принес нам несколько хороших библиотек для svg morph:

https://alexk111.github.io/SVG-Morpheus/
http://greensock.com/morphSVG (возможно, лучший из лучших, но вы должны купить свою лицензию).
https://github.com/gorangajic/react-svg-morph (для реагирования)

Ответ 3

перефразирование:

В настоящее время вы должны использовать то же количество вершин в обоих элементах пути, и они должны быть одного и того же типа и отображаться в том же порядке в другое описание пути. Вы также должны сориентировать оба полигона в одном направлении (слева направо и вправо-влево создадут нежелательные результаты).

Итак, вы можете это сделать (см. приведенную ниже ссылку для примера), но вам нужно спланировать ее так, чтобы вы создавали форму Путь пути и формы B точно так же, как с одинаковыми типами кривой, точками и т.д.

Вот пример, который я сделал: анимированный svg-путь
У меня есть путь по правильному набору в качестве маски изображения; он также оживляет.

Я создал одну фигуру в иллюстраторе
я дублирует эту форму.
Я модифицировал дубликат в новую форму, осторожно, чтобы не добавлять вершины или не меняться от безье к линейному типу кривой и т.д.
fyi, чтобы подтвердить подсчет очков, вы можете выбрать путь, а затем пойти по пути > упростить, и он покажет вам текущие точки на этом пути...
Я сохраняю этот файл svg, а затем копирую/вставляю эти пути в другой svg с информацией о анимации.
ПРИМЕЧАНИЕ: пути помещаются внутри элемента в файле svg, который соответствует имени слоя, которое оно включено в иллюстраторе. Если вы держите обе фигуры на разных слоях в иллюстраторе и четко обозначаете их, это поможет сохранить ваши файлы svg организованными.
ПРИМЕЧАНИЕ # 2: Если вы создаете свою фигуру, и это очень просто, то есть только прямые линии, скорее всего, она будет спасена как _polygon, а не _path, который мне лично трудно было оживить, поэтому Я рекомендую добавить маркер безье, по крайней мере, к одной точке (и идентичную соответствующую точку во второй форме).

Ответ 4

Действительно, существует немало библиотек, которые позволяют svg morphing, как упоминал Дарвин.

Некоторые дополнительные функции, которые я нашел, были: snap.svg, KUTE.js, GSAP. У Svg.js есть плагин для svg morph, и я не верю, что speed.js уже поддерживает это.

Ответ 5

Если вы можете определить морфинг как список изменений вместо второго SVG, вы можете использовать d3 http://d3js.org/ framework

У этого есть немного крутая кривая обучения, но это дает вам много энергии. Если вам нужно что-то проще, я предлагаю Raphael http://raphaeljs.com/ - возможности похожи, но легче начать.