标签: svg-morphing

我做了一些搜索,但我不得不承认,我对SVG有0次经验,我见过一堆现代图书馆,比如Raphael,PaperJS,KineticJS,EaselJS,但我不知道这里的目标是什么,也许甚至CSS关键帧都可以解决问题.

指出这个问题将不胜感激.

目标
在浏览器上,我想使用转换类型将svg1动画为svg2ease-out

约束

• 任何javascript库,如果需要的话
• 应该能够将每个元素分配给相同ID的其他元素
• 变形形状,路径,填充*,笔划*,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" …

我一直在寻找一个关于如何动画svg路径变形的好例子.我知道如何使用SMIL做相当复杂的,但snap.svg是新的和有光泽的,每个人似乎都喜欢它,所以我想看一看.我无法在任何地方找到关于如何在任何地方进行动画路径变换的好例子.希望snap.svg大师可以指出我正确的方向？

这是svg图像及其代码的链接:

链接到图像

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
  <path id="thing"  d="M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z">
    <animate id="myAnimationElement" dur="2s" begin="0" repeatCount="indefinite" attributeName="d"
         values="M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z;

                M179.4,83.5l62.4-11.8c15.3,43.4-76,102.6-22.6,111.5c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C250.6,296.7,52.4,259.2,179.4,83.5z;"/>
  </path>
</svg>

我最近一直在将脚趾浸入 SVG 中，并且我目前正尝试在用户将鼠标悬停在钻石上方时将其变形为圆形。

我在CSS Tricks 上找到了这个教程

我注意到他们使用点来制作动画，但是我的 SVG 形状是：

<circle cx="49.873" cy="50.155" r="49.845"/>

和

<rect x="15.211" y="14.798" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.8426 50.3112)" width="70.198" height="71.034"/>

有没有办法做到这一点？我如何获得这些形状的点，以便我可以遵循 CSS Tricks 教程？