html5 Jak zmienić lub ożywić jeden SVG na inny?

Question

Zrobiłem kilka wyszukiwania, ale muszę przyznać, mam 0 doświadczenia z SVG, widziałem kilka nowoczesnych bibliotek, takich jak Raphael, PaperJS, KineticJS, EaselJS, ale nie mam pojęcia, co pasowałoby do celu tutaj , może nawet klatki kluczowe CSS zrobią lewy.

Wskazówki dla tego problemu byłyby bardzo doceniane.

bramki
W przeglądarce, chcę animowanie svg1 do svg2, stosując typ przejścia ease-out

Ograniczenia

• Wszelkie biblioteki javascript, jeśli jest to wymagane na wszystkich
• W przypadku móc każdy element na inny element o tym samym identyfikatorze
• kształty, ścieżki, wypełnienia *, obrysy *, cx, cy, rc, ry
• Powinien działać na obecnych Firefox i Chrome, IE 10 byłoby miło mieć
• Powinien działać w nowych telefonach komórkowych, takich jak iphone 5, Nexus 4 i 7
• Godna wydajności, nawet w sieciach komórkowych
• Obojętne czy tynkach <svg> lub <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 można visualize here, po prostu wklejanie kodów w okolicy.

Nie mam kodu do pokazania, nie chciałem zaczynać źle. Moja intuicja podpowiada mi, że istnieje 50% szansy, że najlepsze rozwiązanie nie będzie wymagało nawigowania po tych węzłach, jeden po drugim.

Answer 1

O ile widzę chcesz tylko morph ścieżki

To jest ładny poradnik: http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG

W3C spec SVG Ścieżki: http://www.w3.org/TR/SVG/paths.html

W3C spec animację: http://www.w3.org/TR/SVG/animate.html

Oto przykład: http://www.carto.net/svg/samples/path_morphing.shtml

Answer 2

Jeśli możesz określić Morfing jako lista zmian zamiast drugiej SVG, można użyć d3 http://d3js.org/ framework

Ma nieco stromą krzywą uczenia się, ale daje dużą moc. Jeśli chcesz czegoś łatwiejszego, proponuję Raphaela http://raphaeljs.com/ - możliwości są podobne, ale łatwiej jest zacząć.

Answer 3

Parafrazując:

Obecnie trzeba użyć taką samą liczbę wierzchołków w obu path-elementów, i muszą być tego samego typu i pojawiają się w tej samej kolejności w drugiej ścieżce -opis. Powinieneś również zorientować oba wielokąty w tym samym kierunku (lewy i prawy lewy wytworzy niepożądane wyniki).

Możesz więc to zrobić (patrz przykładowy link poniżej), ale musisz go zaplanować, aby utworzyć ścieżkę kształtu A i kształtować ścieżkę B w taki sam sposób, używając identycznych typów krzywych, punktów itp.

Oto przykład, który wykonałem: animated svg path
Mam ścieżkę na prawym zestawie jako maskę obrazu; to także ożywia.

1. stworzyłem jednego kształtu w programie Illustrator
2. i powielane ten kształt.
3. I zmodyfikowane duplikat do nowego kształtu, uważać, aby nie dodawać wierzchołki lub zmianę z Beziera do typu krzywej liniowej itp
4. FYI, aby potwierdzić liczbę momencie można wybrać ścieżkę, a następnie przejść ścieżkę> uprościć i będzie pokaż bieżące punkty na tej ścieżce ...
5. Zapisz ten plik SVG, a następnie skopiuj/wklej te ścieżki do innego pliku SVG z informacjami animacji.
6. UWAGA: ścieżki są umieszczane w elemencie w pliku SVG, który odpowiada nazwie warstwy, która jest włączona w programie Illustrator. Jeśli zachowasz oba kształty na różnych warstwach w programie Illustrator i je nazwiesz, pomoże to uporządkować pliki svg.
7. UWAGA # 2: Jeśli utworzysz swój kształt i będzie on bardzo prosty, tzn. Tylko linie proste, prawdopodobnie zostanie zapisany jako _polygon zamiast _path, który osobiście uważam za trudny do animacji, więc zalecam dodanie beziera uchwyt do co najmniej jednego punktu (i identycznego odpowiadającego punktu w drugim kształcie).

Answer 4

wspomnieć, że 2015 przyniosły nam kilka bardzo ciekawych bibliotek dla svg Morph:

• https://alexk111.github.io/SVG-Morpheus/
• http://greensock.com/morphSVG (chyba najlepszy z najlepszych, ale trzeba kupić licencję)
• https://github.com/gorangajic/react-svg-morph (na reakcję)

Answer 5

Rzeczywiście istnieją Q na kilka bibliotek, które umożliwiają morfowanie svg, jak wspomniał Darwin.

Niektóre dodatki, które znalazłem to: snap.svg, KUTE.js, GSAP. Svg.js ma wtyczkę do svg morph i nie wierzę, że velocity.js ma na to jeszcze wsparcie.