Why don't the circles show up? - d3.js

I built some SVG with d3.js but nothing is displayed. Why? Here is part of code:
<svg width="863" height="863" id="svgId">
<g transform="translate(431.5,431.5)">
<g class="asdf" r="421.5">
<circle transform="translate(0,0)" style="fill: rgb(255, 0, 0);"></circle>
</g>
<g class="asdf" r="127.6354829132969">
<circle transform="translate(-118.50486492278469,167.13470131539657)" style="fill: rgb(255, 0, 0);"></circle>
</g>
</g>


You've set the radius (r attribute) on the <g> element where it does nothing and not on the <circle> element where it's required. What you need is this...
<svg width="863" height="863" id="svgId">
<g transform="translate(431.5,431.5)">
<g class="asdf">
<circle r="421.5" transform="translate(0,0)" style="fill: rgb(255, 0, 0);"></circle>
</g>
<g class="asdf">
<circle r="127.6354829132969" transform="translate(-118.50486492278469,167.13470131539657)" style="fill: rgb(255, 0, 0);"></circle>
</g>
</g>
</svg>

Related

Hard svg animation

I need your help with the implementation of svg animation.
https://youtu.be/lrWjkARl8Zg
(sorry for the poor video quality)
And I have such a structure of svg
I need the arrow (class = "arrow") itself to move along long lines and draw it.
<svg class="vector" width="1193" height="329" viewBox="0 0 1193 329" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="long_line" d="M1436 327.98L84.7148 327.98C73.8082 328.219 62.9639 326.275 52.818 322.262C42.6722 318.249 33.4293 312.249 25.6315 304.613C17.8337 296.977 11.6384 287.858 7.40866 277.793C3.17891 267.728 0.999997 256.919 0.999996 246C0.999996 235.081 3.17891 224.272 7.40866 214.207C11.6384 204.142 17.8337 195.023 25.6315 187.387C33.4292 179.751 42.6722 173.75 52.818 169.738C62.9638 165.725 73.8082 163.781 84.7147 164.02L589.173 164.02" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path class="arrow" d="M544 204L589 164L548 124" stroke="black" stroke-width="2"/>
<path class="arrow" d="M504 1L459 41L500 81" stroke="black" stroke-width="2"/>
<path class="short_line" d="M1308 41L459 41" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
</svg>
Advise which library I can use

You could do this using svg smil animations:
A Guide to SVG Animations (SMIL)
Your arrow animations could be achieved by
<animateMotion> for moving the arrow element and
animating the stroke-dashoffset property.
Animated example
svg {
border: 1px solid #ccc;
width: 33%;
overflow: visible;
display: block;
}
path {
stroke-width: 10;
stroke: #000;
}
<p>Click on animation for replay</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 500">
<defs>
<path id="arrow" fill="none" d="M-45,40L0,0l-41-40" />
</defs>
<use id="arrow1" href="#arrow" />
<use id="arrow2" href="#arrow" />
<g id="graphics">
<rect id="graphics" fill="#fff" fill-opacity="0" x="0" y="0" width="100%" height="100%" />
<path id="mpath-long" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="100" stroke-dasharray="100" d="M1571,413H219.7
c-10.9,0.2-21.8-1.7-31.9-5.7c-10.1-4-19.4-10-27.2-17.6c-7.8-7.6-14-16.8-18.2-26.8S136,341.9,136,331s2.2-21.7,6.4-31.8
s10.4-19.2,18.2-26.8c7.8-7.6,17-13.6,27.2-17.6c10.1-4,21-6,31.9-5.7h504.5" />
<path id="mpath-short" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="100" stroke-dasharray="100" d="M1443,126H594" />
</g>
<animateMotion href="#arrow1" dur="2" rotate="auto" repeatCount="1" begin="0;graphics.click" fill="freeze">
<mpath href="#mpath-long" />
</animateMotion>
<animate attributeType="XML" href="#mpath-long" id="strokeAni" attributeName="stroke-dashoffset" from="100" to="0" dur="2s" repeatCount="1" begin="0;graphics.click" fill="freeze" />
<animateMotion href="#arrow2" dur="2s" rotate="auto" repeatCount="1" begin="0;graphics.click" fill="freeze">
<mpath href="#mpath-short" />
</animateMotion>
<animate attributeType="XML" href="#mpath-short" attributeName="stroke-dashoffset" from="100" to="0" dur="2s" repeatCount="1" fill="freeze" begin="0;graphics.click" />
</svg>
Quite likely, you will have to tweak your svg viewBox to get the desired result.
A common trick is to position element that's supposed to move along the motion path to x/y = 0.
Static example
<style>
svg{
border: 1px solid #ccc;
width: 33%;
overflow:visible;
display:block;
}
path{
stroke-width:10;
stroke: #000;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 500">
<defs>
<path id="arrow" fill="none" d="M-45,40L0,0l-41-40" />
</defs>
<use id="arrow1" href="#arrow" />
<use id="arrow2" href="#arrow" />
<g id="graphics">
<rect id="graphics" fill="#fff" fill-opacity="0" x="0" y="0" width="100%" height="100%" />
<path id="mpath-long" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="0" stroke-dasharray="100" d="M1571,413H219.7
c-10.9,0.2-21.8-1.7-31.9-5.7c-10.1-4-19.4-10-27.2-17.6c-7.8-7.6-14-16.8-18.2-26.8S136,341.9,136,331s2.2-21.7,6.4-31.8
s10.4-19.2,18.2-26.8c7.8-7.6,17-13.6,27.2-17.6c10.1-4,21-6,31.9-5.7h504.5" />
<path id="mpath-short" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="0" stroke-dasharray="100" d="M1443,126H594" />
</g>
</svg>

How to make an object rotate around the exact center of the screen using animateTransform?

Consider the following SVG code for moving a circle around the center of the screen, with hard-coded dimensions:
<svg xmlns="http://www.w3.org/2000/svg">
<g>
<ellipse id="circ" style="fill:#000000"
cx="60%" cy="50%"
rx="10" ry="10" />
<!--Assuming window size is 1000x1000-->
<animateTransform attributeName="transform"
type="rotate" dur="10s"
from="0,500,500"
to="360,500,500"
repeatCount="indefinite"/>
</g>
</svg>
If I try to provide the center of rotation in percent, the animation doesn't work at all:
<animateTransform attributeName="transform"
type="rotate" dur="10s"
from="0,50%,50%"
to="360,50%,50%"
repeatCount="indefinite"/>
How do I fix this?

Set a viewBox on your SVG, then whatever size you make it, the ellipse will rotate around the centre of it.
viewBox="0 0 1000 1000"
The value of 1000 for width and height here is chosen because it would make 500 be the centre.
svg:nth-child(1) {
width: 200px;
}
svg:nth-child(2) {
width: 500px;
}
svg {
border: solid 1px green;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<g>
<ellipse id="circ" style="fill:#000000"
cx="60%" cy="50%"
rx="10" ry="10" />
<!--Assuming window size is 1000x1000-->
<animateTransform attributeName="transform"
type="rotate" dur="10s"
from="0,500,500"
to="360,500,500"
repeatCount="indefinite"/>
</g>
</svg>
<!-- An exact duplicate of th first one -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<g>
<ellipse id="circ" style="fill:#000000"
cx="60%" cy="50%"
rx="10" ry="10" />
<!--Assuming window size is 1000x1000-->
<animateTransform attributeName="transform"
type="rotate" dur="10s"
from="0,500,500"
to="360,500,500"
repeatCount="indefinite"/>
</g>
</svg>

d3.js label inside path deformed

i added a label inside a path successfully but when i try to center this label by changing manually x and dy attributes. the label deforms in the center.
here is some picture and its corresponding code.
before changing the x attributes its value 135:
<svg width="1306" height="628">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;"></path>
</g>
<text x="135" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
</svg>
after changing the x attributes new value is 145:
<svg width="1306" height="628">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;"></path>
</g>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
</svg>

There is nothing "deformed" here. That's the expected behaviour: you're using a textPath to position the text, and the path you're referencing changes orientation at the first L command.
You can clearly see that there is nothing wrong when we draw some (red) lines, showing this "bend":
<svg width="400" height="300">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path>
</g>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<line x1="756.3916666656733" y1="317.133080" x2="728.1939393933862"
y2="555.2472222223878" stroke="red" transform="translate(-500,-260)"
></line>
<line x1="756.3916666656733" y1="317.133080" x2="822.186363636516"
y2="527.049" stroke="red" transform="translate(-500,-260)"
></line>
</svg>
And you can see that even better if we create several texts, increasing the dy up to your value (105):
<svg width="400" height="300">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path>
</g>
<text x="145" dy="15"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="40"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="60"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="80"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<line x1="756.3916666656733" y1="317.133080" x2="728.1939393933862"
y2="555.2472222223878" stroke="red" transform="translate(-500,-260)"
></line>
<line x1="756.3916666656733" y1="317.133080" x2="822.186363636516"
y2="527.049" stroke="red" transform="translate(-500,-260)"
></line>
</svg>
Possible solution: alternatively, you can draw a curve. That way, the text will follow the path without breaks:
<svg width="400" height="300">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513 C 756 327,756 327, 878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path>
</g>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
</svg>

SVG animate d attribute mousedown and return on mouseout

I am trying to get this Emoji to frown on mouse over starting from a blank stare then return to the frown on mouseout.
Basically have an animate path applied from and to for a repeat duration of one then reset on mouseout. I have read a bunch of articles but an confused if this using from and to vs animatetransform is the best.
Below is the svg the animation I want to include in without external CSS or Jquery.
Thanks in advance.
<svg width="189px" height="189px" viewBox="0 0 189 189" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill- rule="evenodd" sketch:type="MSPage">
<g id="unsatisfied-head" sketch:type="MSLayerGroup">
<g id="g10" transform="translate(94.500000, 94.655027) scale(1, -1) translate(-94.500000, -94.655027) translate(0.000000, 0.655027)">
<g id="g12">
<g id="unsatified-head-box">
<mask id="mask-2" sketch:name="path18" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path18"></g>
<g id="head-container">
<g transform="translate(9.904041, 9.879125)">
<g id="head-bg">
<path d="M168.368696,83.9725634 C168.368696,37.5950106 130.678868,0 84.1843479,0 C37.6947798,0 0,37.5950106 0,83.9725634 C0,130.345177 37.6947798,167.945127 84.1843479,167.945127 C130.678868,167.945127 168.368696,130.345177 168.368696,83.9725634" id="path22" fill="#FFCC4D" sketch:type="MSShapeGroup"></path>
</g>
<g id="left-eye" transform="translate(44.568184, 88.912126)">
<path d="M0,19.7582502 C0,19.7582502 0,29.6373753 9.90404093,29.6373753 C19.8080819,29.6373753 19.8080819,19.7582502 19.8080819,19.7582502 L19.8080819,9.8791251 C19.8080819,9.8791251 19.8080819,0 9.90404093,0 C0,0 0,9.8791251 0,9.8791251 L0,19.7582502 L0,19.7582502 Z" id="path26" fill="#664500" sketch:type="MSShapeGroup"></path>
</g>
<g id="right-eye" transform="translate(103.992430, 88.912126)">
<path d="M0,19.7582502 C0,19.7582502 0,29.6373753 9.90404093,29.6373753 C19.8080819,29.6373753 19.8080819,19.7582502 19.8080819,19.7582502 L19.8080819,9.8791251 C19.8080819,9.8791251 19.8080819,0 9.90404093,0 C0,0 0,9.8791251 0,9.8791251 L0,19.7582502 L0,19.7582502 Z" id="path30" fill="#664500" sketch:type="MSShapeGroup"></path>
</g>
<g id="mouth" transform="translate(36.967823, 31.754472)">
<path d="M74.280307,0 L4.95202046,0 C2.21850517,0 0,2.20798446 0,4.93956255 C0,7.67114064 2.21850517,9.8791251 4.95202046,9.8791251 L74.280307,9.8791251 C77.0187743,9.8791251 79.2323274,7.67114064 79.2323274,4.93956255 C79.2323274,2.20798446 77.0187743,0 74.280307,0" id="path34" fill="#664500" sketch:type="MSShapeGroup"></path>
<animate attributeType="XML" dur="10s" begin="mouseoff" attributeName="d" restart="whenNotActive" repeatCount="1" fill="freeze"
from="M74.280307,0 L4.95202046,0 C2.21850517,0 0,2.20798446 0,4.93956255 C0,7.67114064 2.21850517,9.8791251 4.95202046,9.8791251 L74.280307,9.8791251 C77.0187743,9.8791251 79.2323274,7.67114064 79.2323274,4.93956255 C79.2323274,2.20798446 77.0187743,0 74.280307,0"
to="M0.990404093,0.98791251 C1.87186374,0.192642939 3.18910118,0.143247314 4.13493709,0.844665196 C4.32806589,0.98791251 23.5567613,15.1693966 47.2175151,15.1693966 C70.8188447,15.1693966 90.1119164,0.98791251 90.3000932,0.844665196 C91.2459291,0.143247314 92.5631665,0.202522065 93.4446262,0.98791251 C94.3211338,1.77824252 94.5192146,3.08228703 93.9101161,4.08995779 C93.2713054,5.15196374 77.9794662,29.9880842 47.2175151,29.9880842 C16.455564,29.9880842 1.15877279,5.15196374 0.524914169,4.08995779 C-0.0841843479,3.07734747 0.10894445,1.77824252 0.990404093,0.98791251"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

There are a few errors :
your <animate> should be inside the <path>and </path> tags or you have to use its xlink:href property
if you really want to see the shape animated, you'll have to make your destination shape with the same number of points your original shape has
the mouseoff event doesn't exists, maybe you wanted mouseup
<svg width="189px" height="189px" viewBox="0 0 189 189" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill- rule="evenodd" sketch:type="MSPage">
<g id="unsatisfied-head" sketch:type="MSLayerGroup">
<g id="g10" transform="translate(94.500000, 94.655027) scale(1, -1) translate(-94.500000, -94.655027) translate(0.000000, 0.655027)">
<g id="g12">
<g id="unsatified-head-box">
<mask id="mask-2" sketch:name="path18" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path18"></g>
<g id="head-container">
<g transform="translate(9.904041, 9.879125)">
<g id="head-bg">
<path d="M168.368696,83.9725634 C168.368696,37.5950106 130.678868,0 84.1843479,0 C37.6947798,0 0,37.5950106 0,83.9725634 C0,130.345177 37.6947798,167.945127 84.1843479,167.945127 C130.678868,167.945127 168.368696,130.345177 168.368696,83.9725634" id="path22"
fill="#FFCC4D" sketch:type="MSShapeGroup"></path>
</g>
<g id="left-eye" transform="translate(44.568184, 88.912126)">
<path d="M0,19.7582502 C0,19.7582502 0,29.6373753 9.90404093,29.6373753 C19.8080819,29.6373753 19.8080819,19.7582502 19.8080819,19.7582502 L19.8080819,9.8791251 C19.8080819,9.8791251 19.8080819,0 9.90404093,0 C0,0 0,9.8791251 0,9.8791251 L0,19.7582502 L0,19.7582502 Z"
id="path26" fill="#664500" sketch:type="MSShapeGroup"></path>
</g>
<g id="right-eye" transform="translate(103.992430, 88.912126)">
<path d="M0,19.7582502 C0,19.7582502 0,29.6373753 9.90404093,29.6373753 C19.8080819,29.6373753 19.8080819,19.7582502 19.8080819,19.7582502 L19.8080819,9.8791251 C19.8080819,9.8791251 19.8080819,0 9.90404093,0 C0,0 0,9.8791251 0,9.8791251 L0,19.7582502 L0,19.7582502 Z"
id="path30" fill="#664500" sketch:type="MSShapeGroup"></path>
</g>
<g id="mouth" transform="translate(36.967823, 31.754472)">
<path id="path34" fill="#664500" d="M0,4.9C0.4,0.9,3.6-0.1,5,0c0.2,0.1,19.8,0,43.5,0C72,0,67.2,0,75.1,0c0.7-0.1,4.2,1.4,4.2,4.9c0,2.5-2.3,4.9-4.4,4.9c-2.3,0-2.3,0-33.1,0S8.2,10,5,9.9C3.6,9.9-2.4,9,0.9,1.3">
<animate attributeType="XML" dur="2s" begin="mouseup" attributeName="d" repeatCount="1" fill="freeze" to="M1,1c0.9-0.8,2.2-0.8,3.1-0.1C4.3,1,23.6,15.2,47.2,15.2C70.8,15.2,90.1,1,90.3,0.8c0.9-0.7,2.3-0.6,3.1,0.1c0.9,0.8,1.1,2.1,0.5,3.1C93.3,5.2,78,30,47.2,30S1.2,5.2,0.5,4.1C-0.1,3.1,0.1,1.8,1,1"
/>
</path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

SVG animation scaling while keeping the group from moving on one end

I am trying to use svg animation to get a dragonfly to flap its wings.
I am doing this by scaling the left and right wing on the x axis. the problem is when I scale it the wing moves. I want the left or right edge of the wing to stay in one spot when it scales.
here is the code for one wing
<g id="wing_left">
<g>
<path fill="#88C9CE" d="M254.8,132.1c-66.2,6.7-130.7,21.1-193.3,47.2c-7.4,3.1-58.6,24.1-44.8,37.4
c15.2,14.8,88.3,17.3,109.3,11.3C162.6,217.8,279.4,129.7,254.8,132.1z"/>
<path fill="#92D9DE" d="M237.3,113.7c-16.1,3.6-245.9-31.8-250-22.3c-11.5,26.7,38.3,51.9,56.1,58.2
c88.5,31.4,185.6,6.2,202.5-11.3C251.7,132.4,247.9,111.3,237.3,113.7z"/>
<path fill="#FFFFFF" d="M-1.2,97.7c9.1-4.5,84.8,7.2,83.7,7.1c-16.4-1.7-49.9-3.3-56.9-3.5c-32.2-1.2-24,7.4-22.5,11.8
C5,118.4-7.2,100.6-1.2,97.7z"/>
<path fill="#76B0B3" d="M249.3,145.5c-2.9,3-8,7.3-11.5,10.2c-21.1,17.5-102.1,8.9-102.1,8.9s54.5-2.2,86-13.4
c13.2-4.7,21-10.2,23.2-12c0,0,1.1,1.4,2.1,2.5c1,1.1,2.3,1.8,2.3,1.8S249.3,145.5,249.3,145.5z"/>
</g>
<animateTransform id="wlFlapDown" attributeName="transform"
type="scale"
from="1 1" to="0.5 1"
begin="0s;wlFlapUp.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
<animateTransform id="wlFlapUp" attributeName="transform"
type="scale"
from="0.5 1" to="1 1"
begin="wlFlapDown.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
</g>
Here is the whole svg code or you can see it in codepen
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-14.4 7.7 550.5 426.8" enable-background="new -14.4 7.7 550.5 426.8" xml:space="preserve">
<g id="wing_left">
<g>
<path fill="#88C9CE" d="M254.8,132.1c-66.2,6.7-130.7,21.1-193.3,47.2c-7.4,3.1-58.6,24.1-44.8,37.4
c15.2,14.8,88.3,17.3,109.3,11.3C162.6,217.8,279.4,129.7,254.8,132.1z"/>
<path fill="#92D9DE" d="M237.3,113.7c-16.1,3.6-245.9-31.8-250-22.3c-11.5,26.7,38.3,51.9,56.1,58.2
c88.5,31.4,185.6,6.2,202.5-11.3C251.7,132.4,247.9,111.3,237.3,113.7z"/>
<path fill="#FFFFFF" d="M-1.2,97.7c9.1-4.5,84.8,7.2,83.7,7.1c-16.4-1.7-49.9-3.3-56.9-3.5c-32.2-1.2-24,7.4-22.5,11.8
C5,118.4-7.2,100.6-1.2,97.7z"/>
<path fill="#76B0B3" d="M249.3,145.5c-2.9,3-8,7.3-11.5,10.2c-21.1,17.5-102.1,8.9-102.1,8.9s54.5-2.2,86-13.4
c13.2-4.7,21-10.2,23.2-12c0,0,1.1,1.4,2.1,2.5c1,1.1,2.3,1.8,2.3,1.8S249.3,145.5,249.3,145.5z"/>
</g>
<animateTransform id="wlFlapDown" attributeName="transform"
type="scale"
from="1 1" to="0.5 1"
begin="0s;wlFlapUp.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
<animateTransform id="wlFlapUp" attributeName="transform"
type="scale"
from="0.5 1" to="1 1"
begin="wlFlapDown.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
</g>
<g id="wing_right">
<g>
<path fill="#88C9CE" d="M275.9,134c66.4,4.7,131.2,17.1,194.6,41.4c7.5,2.9,59.3,22.3,45.9,36.1c-14.8,15.2-87.7,19.9-109,14.6
C370.6,216.9,251.2,132.2,275.9,134z"/>
<path fill="#92D9DE" d="M285,113c16.2,3.1,244.8-39.1,249.2-29.7c12.3,26.3-36.8,53-54.4,59.8c-87.6,34-185.4,11.7-202.8-5.2
C271.1,132.1,274.2,110.9,285,113z"/>
<path fill="#FFFFFF" d="M451.2,98.5c25.6-4.3,28.9-4.8,58.9-8.8c1.9-0.3,16.3-1.3,15.6,4.3c-0.2,1.4-6.5,17.8-6,13.2
c0.1-0.8,0.9-9.8-1.3-12.5C513.9,88.7,445.7,99.5,451.2,98.5z"/>
<path fill="#76B0B3" d="M291.3,155.4c21.9,16.6,99.9,5.4,99.9,5.4s-54.7-0.2-86.7-9.9c-13.4-4.1-22.5-9.1-24.1-10.3
c0,0-0.8,0.9-1.8,1.6c0,0,0.1,2.2,0.1,2.2S287.6,152.7,291.3,155.4z"/>
</g>
<animateTransform id="wrFlapDown" attributeName="transform"
type="scale"
from="1 1" to="0.5 1"
begin="0s; wrFlapUp.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
<animateTransform id="wrFlapDown" attributeName="transform"
type="scale"
from="0.5 1" to="1 1"
begin="wrFlapDown.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
</g>
<g id="body" xmlns:inkpad="http://taptrix.com/inkpad/svg_extensions">
<g id="Layer_2" inkpad:layerName="body">
<path fill="#D9AC32" d="M253.8,83.2c-4.5-29.5-6.4-53.2-16-74.7c-0.8-1.9-4.3,1-3.4,1.6c0.4,0.2,12.6,13.5,17.3,73.2
C252.2,88.9,254.5,87.3,253.8,83.2z"/>
<path fill="#D9AC32" d="M272.2,82.6c5.2-29.3,7.8-53,17.9-74.3c0.9-1.9,4.3,1.1,3.3,1.7c-0.4,0.2-12.9,13.2-19.1,72.7
C273.7,88.2,271.5,86.6,272.2,82.6z"/>
<path fill="#FFE008" d="M249.8,128.8l28.2-0.4c0,0,10.4,208,2.7,260.4c-10.3,71.1-18.9,49.7-27.9,0.4
C243.4,337.1,249.8,128.8,249.8,128.8z"/>
<path fill="#FFE008" d="M242.5,130.2c-0.2-12,9-21.8,20.6-22c11.5-0.2,21.1,9.4,21.2,21.4c0.2,12-9.7,17-21.2,17.2
C251.5,146.9,242.7,142.2,242.5,130.2z"/>
<path fill="#FFE008" d="M236.8,110.7c-0.3-18.4,12-32.8,26.5-33c14.5-0.2,25.8,13.9,26.1,32.2c0.3,18.4-11.7,25.1-26.3,25.3
C248.6,135.4,237.1,129,236.8,110.7z"/>
</g>
<g id="Layer_3" inkpad:layerName="eyes">
<g>
<path fill="#F5F2E1" d="M227.8,95.9c-0.1-8.3,7.2-15.1,16.4-15.3c9.2-0.1,16.7,6.5,16.8,14.8c0.1,8.3-7.2,15.1-16.4,15.3
C235.4,110.9,227.9,104.2,227.8,95.9z"/>
<path d="M255.1,92c-0.6,1.6-7.3-5.5-19.7,3.7c-2.4,1.8-1.8-4.6-0.1-6C244.1,82.6,255.8,90.4,255.1,92z"/>
<path fill="#D8E6C3" d="M228,96.2c-0.1-5.4,2.1,9.9,15.5,11.1c8.1,0.7,14.5-2.9,14.2-2.5c-3.9,4.4-9,5.5-10.5,5.7
C236.8,111.8,228.2,106.5,228,96.2z"/>
</g>
<g>
<path fill="#F5F2E1" d="M295.8,94.9c-0.1-8.3-7.7-14.9-16.8-14.8c-9.2,0.1-16.5,7-16.4,15.3c0.1,8.3,7.7,14.9,16.8,14.8
C288.6,110.1,295.9,103.2,295.8,94.9z"/>
<path d="M268.3,91.8c0.7,1.6,7.1-5.7,19.8,3.1c2.5,1.7,1.7-4.7-0.1-6C279.1,82.1,267.6,90.3,268.3,91.8z"/>
<path fill="#D8E6C3" d="M295.5,95.2c-0.1-5.4-1.8,9.9-15.2,11.5c-8.1,1-14.6-2.5-14.3-2.1c4,4.3,9.2,5.2,10.7,5.4
C287.2,111,295.7,105.5,295.5,95.2z"/>
</g>
</g>
<path fill="#E5C907" d="M242.6,127.9c0-0.1,4.8,8.1,22.5,7.2c13.6-0.7,19-8.1,19-8.1c-0.4,4.9-11.3,11.2-18.3,11.6
C260.3,139,247.3,137.3,242.6,127.9z"/>
<path fill="#E5C907" d="M249.3,143.6c0,0,6,3.9,15,3.2c10.4-0.8,14.4-4.7,14.4-4.6c0.2,4.1,0.5,8.3,0.4,8.6
c-3.5,7.1-20.6,9.4-29.8,2C249,152.5,249.3,147.1,249.3,143.6z"/>
</g>
</svg>

The problem here is that the origin for all scale transforms is at (0,0) which is at the top left of the SVG. So your scale animations are centred on the left side of the SVG (x=0).
Basically you need to move the coordinate space for the wings, so that when the scale is applied, the wings are centred on x=0.
So the steps would be:
Use a translate transform to move your wings so they are centred at x=0
apply your scale animation in this coordinate space
surround that with a group with a transform that moves them back to their original position
For example:
<g id="wings" transform="translate(270,0)">
<g>
<g transform="translate(-270,0)">
<g "left wing">
<g "right wing">
</g>
<animateTransform .../>
</g>
</g>
Demo here

Resources