html5 Comment faire pour transformer ou animer une SVG à l'autre?
J'ai fait quelques recherches mais je dois l'avouer, j'ai 0 expérience avec SVG, j'ai vu plein de moderne bibliothèques, tels que Raphaël, PaperJS, KineticJS, EaselJS, mais je n'ai aucune idée de ce qui pourrait convenir à l'objectif, ici, peut-être même CSS les images clés ferait l'affaire.
Pointeurs à ce problème serait grandement apprécié.
Objectif
Sur le navigateur, je veux animer svg1 en svg2, en utilisant le type de transition, ease-out
Contraintes
- Toute bibliothèque javascript, si nécessaire, à tous les
- Devrait être en mesure de chaque élément à l'autre élément de la même ID
- morph les formes, les chemins, remplissez*, accident vasculaire cérébral*, cx, cy, rc, ry
- Devrait fonctionner sur courant Firefox et Chrome, IE 10 serait bien d'avoir
- Devrait fonctionner dans de nouveaux mobiles tels que l'iphone 5, le nexus 4 et 7
- Des performances décentes, même sur les mobiles
- Indifférent si elle rend
<svg>
ou<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 vous pouvez visualiser ici, il suffit de la coller les codes de la région.
Je n'ai pas le code pour afficher, je ne voulais pas commencer de mal. Mon intuition me dit qu'il ya une chance de 50% que la meilleure solution n'impliquent pas de navigation de ces nœuds un par un de comparaison alors!
OriginalL'auteur Fabiano Soriani | 2013-02-14
Vous devez vous connecter pour publier un commentaire.
Aussi loin que je peux voir vous ne voulez morph chemins
C'est un bon tutoriel: http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG
Spec W3C pour le SVG Chemins: http://www.w3.org/TR/SVG/paths.html
Spec W3C pour l'animation: http://www.w3.org/TR/SVG/animate.html
Voici un exemple: http://www.carto.net/svg/samples/path_morphing.shtml
Qu'entendez-vous par "plus large "morph"? Je suppose que Raphaël serait travailler pour vous.
Cela voudrait dire, étant donné un SVG j'aimerais transition à une autre SVG, tous les id présent dans SVG1 devrait également être en SVG2, donc il se contente d'interpolation de toutes sortes de valeurs mathématiques selon un certain assouplissement de la fonction
OriginalL'auteur Mike
À mentionner que 2015 nous ont apporté plusieurs très jolies bibliothèques pour le svg morph:
acheter leur licence)
OriginalL'auteur Darwin
de la paraphrase:
Actuellement, vous devez utiliser le même nombre de sommets dans les deux parcours-éléments de, et ils doivent être de même type et de même apparaître dans le même ordre dans l'autre chemin-description. Vous devez également orienter les deux polygones dans la même direction (gauche-droite et droite-gauche serait de produire des résultats indésirables).
De sorte que vous pouvez le faire (voir le lien ci-dessous pour un exemple), mais vous devez planifier de sorte que vous créez la forme d'Un chemin et de la forme B chemin exactement de la même façon avec les mêmes types de courbes, points, etc.
Voici un exemple que j'ai fait: animation svg chemin
J'ai le chemin sur la droite définie comme un masque d'une image; il anime également.
C'est un excellent résumé. J'ai utilisé les deux voies d'approche (Deuxième cachés), et a ensuite parcouru les chemins de la chaîne de sommets d'interpolation entre eux (mise à jour de la chaîne de chemin d'accès pour chaque image de l'interpolation). Vous pouvez me voir entre deux courbes de bézier dans le qui coule.encre avec javascript.
OriginalL'auteur jared
En effet, il existe assez peu de bibliothèques qui permettent svg morphing, comme Darwin mentionné.
Quelques extras que j'ai trouvé étaient les suivants: composant logiciel enfichable.svg, KUTE.js, GSAP. Svg.js a un plugin pour le svg se transformer et je ne crois pas velocity.js a l'appui de cette encore.
OriginalL'auteur Simon d
Si vous pouvez définir le morphing comme une liste de modifications à la place de deuxième SVG, vous pouvez utiliser d3 http://d3js.org/ cadre
Il a un peu raide de la courbe d'apprentissage, mais il vous donne beaucoup de puissance. Si vous voulez quelque chose de plus facile, je suggère Raphaël http://raphaeljs.com/ fonctions sont similaires, mais il est plus facile pour commencer.
OriginalL'auteur naugtur