使用Snapsvg变形SVG

时间:2015-08-21 20:29:43

标签: javascript svg snap.svg

我正在尝试变形并将svg1内联到svg2。

我见过这个例子

s = Snap(400, 620);

var path = s.path("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");

path.animate({ d: "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" }, 1000, mina.bounce);

但是如何用这样的结构变形svg

<g id="codicated-logo-svg" style="display:none">
                <path
     style="fill:none"
     id="path5665"
     d="m 0,0 1024,0 0,588.8 L 0,588.8 0,0 Z" />
  <path
     style="fill:#29b2d1"
     id="path5667"
     d="m 130.72,16.91 c 19.46,0.06 38.91,0.15 58.37,0.22 0.03,1.71 0.04,3.41 0.05,5.12 -19.51,-0.09 -39.03,-0.1 -58.54,-0.27 0.02,-1.7 0.06,-3.39 0.12,-5.07 z" />
  <path
     style="fill:#29b2d1"
     id="path5669"
     d="m 46.89,31.84 c 9.33,-0.99 18.73,-0.62 28.1,-0.63 7.85,0.25 16.6,0.36 22.89,5.74 5.98,5.48 6.51,14.2 6.64,21.78 -2.19,0.01 -4.37,0.02 -6.56,0.02 -0.52,-5.99 -0.42,-13.15 -5.63,-17.24 -5.08,-3.38 -11.5,-2.75 -17.3,-3.03 -8.69,0.02 -17.39,-0.22 -26.07,0.3 -4.33,0.27 -9.22,1.42 -11.67,5.36 -2.74,4.78 -2.78,10.48 -3.1,15.84 -0.18,11.11 -0.22,22.23 0.05,33.34 0.39,5.35 0.43,11.15 3.49,15.78 3.32,4.37 9.29,4.69 14.31,4.89 9.64,0.23 19.3,0.3 28.95,-0.07 4.92,-0.29 10.8,-0.87 13.78,-5.37 3.17,-4.91 2.71,-10.99 3.18,-16.56 2.19,0.02 4.37,0.04 6.55,0.1 -0.15,7.91 -0.42,16.89 -6.21,22.99 -5.84,5.7 -14.53,6.05 -22.21,6.29 -9.72,0.04 -19.47,0.39 -29.15,-0.59 -4.71,-0.79 -9.65,-2.31 -12.99,-5.91 -3.41,-3.43 -4.72,-8.33 -5.53,-12.96 -1.47,-10.29 -0.93,-20.72 -1.04,-31.08 0.23,-9.71 -0.43,-19.96 3.68,-29.02 2.84,-6.1 9.51,-9.09 15.84,-9.97 z" />
</g>

0 个答案:

没有答案