Edges of SVG are getting cut off in Firefox - firefox

On firefox the left edges of these SVGs are getting cut off at a certain windows size:
In Chrome its working. Does anybody knows why this is happening?
Some Firefox-internal bug? I already removed all styles from the svg, but its still not working. Setting the width to 100% isn't working either.
Contact SVG Source Code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, 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" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="77px" height="30px" viewBox="0 0 77 30" enable-background="new 0 0 77 30" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#333333" d="M0,15c0,7.95,6.18,14.45,14,14.97c0.33,0.02,0.66,0.03,1,0.03h46
v-0.03c0.33,0.02,0.66,0.03,1,0.03c8.28,0,15-6.72,15-15S70.28,0,62,0c-0.34,0-0.67,0.01-1,0.03V0H15c-0.34,0-0.67,0.01-1,0.03
C6.18,0.55,0,7.05,0,15z M14,29.97V30h1C14.66,30,14.33,29.99,14,29.97z M15,0h-1v0.03C14.33,0.01,14.66,0,15,0z"/>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M14.59,17.11c0.22,0.62,0.52,1.16,0.91,1.58
c0.38,0.43,0.83,0.76,1.36,0.98c0.53,0.22,1.09,0.33,1.72,0.33c0.62,0,1.19-0.11,1.69-0.34c0.48-0.22,0.92-0.55,1.31-0.99
l-0.7-0.76c-0.32,0.36-0.66,0.62-1.02,0.81C19.5,18.91,19.08,19,18.61,19c-0.47,0-0.89-0.09-1.27-0.28
c-0.37-0.19-0.7-0.45-0.95-0.81c-0.26-0.35-0.47-0.77-0.61-1.27c-0.15-0.48-0.22-1.05-0.22-1.67c0-0.6,0.07-1.14,0.22-1.64
c0.16-0.49,0.36-0.91,0.64-1.25c0.27-0.35,0.6-0.61,0.97-0.8C17.77,11.09,18.2,11,18.67,11c0.42,0,0.8,0.09,1.11,0.25
c0.31,0.16,0.6,0.37,0.86,0.66l0.7-0.8c-0.29-0.28-0.67-0.55-1.11-0.77C19.78,10.12,19.25,10,18.66,10c-0.63,0-1.22,0.12-1.75,0.34
c-0.53,0.24-1,0.57-1.39,1c-0.39,0.44-0.69,0.96-0.91,1.58c-0.22,0.63-0.33,1.31-0.33,2.08C14.28,15.78,14.38,16.48,14.59,17.11z"
/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M24.61,15.5c0.09-0.31,0.23-0.58,0.42-0.8
c0.19-0.22,0.41-0.39,0.67-0.51c0.25-0.13,0.55-0.19,0.86-0.19c0.32,0,0.6,0.06,0.86,0.19c0.25,0.12,0.47,0.29,0.66,0.51
c0.19,0.22,0.33,0.49,0.44,0.8c0.09,0.31,0.15,0.64,0.15,1.02c0,0.37-0.06,0.71-0.15,1.01c-0.11,0.31-0.25,0.56-0.44,0.78
c-0.19,0.22-0.41,0.39-0.66,0.52C27.16,18.95,26.88,19,26.56,19c-0.31,0-0.61-0.05-0.86-0.17c-0.26-0.13-0.48-0.3-0.67-0.52
c-0.19-0.22-0.33-0.47-0.42-0.78c-0.09-0.3-0.14-0.64-0.14-1.01C24.47,16.14,24.52,15.81,24.61,15.5z M23.47,18
c0.19,0.44,0.42,0.8,0.73,1.09c0.32,0.3,0.68,0.52,1.08,0.68c0.41,0.15,0.83,0.23,1.28,0.23c0.44,0,0.88-0.08,1.28-0.23
c0.41-0.16,0.77-0.38,1.08-0.68c0.31-0.29,0.55-0.65,0.74-1.09c0.18-0.44,0.28-0.92,0.28-1.48c0-0.57-0.1-1.05-0.28-1.49
c-0.19-0.44-0.43-0.8-0.74-1.11c-0.31-0.3-0.67-0.53-1.08-0.69C27.44,13.08,27,13,26.56,13c-0.45,0-0.87,0.08-1.28,0.23
c-0.4,0.16-0.76,0.39-1.08,0.69c-0.31,0.31-0.54,0.67-0.73,1.11c-0.19,0.44-0.28,0.92-0.28,1.49C23.19,17.08,23.28,17.56,23.47,18z
"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M31.73,20h1.22v-4.98c0.38-0.33,0.71-0.58,1-0.75
c0.28-0.18,0.63-0.27,1-0.27c0.47,0,0.83,0.16,1.05,0.44c0.22,0.28,0.33,0.75,0.33,1.39V20h1.23v-4.33c0-0.87-0.18-1.55-0.53-2
C36.67,13.23,36.11,13,35.34,13c-0.51,0-0.96,0.11-1.34,0.3c-0.39,0.18-0.75,0.43-1.09,0.72h-0.05L32.75,13h-1.02V20z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M39.94,17.75c0,0.34,0.03,0.64,0.11,0.92
c0.06,0.28,0.18,0.52,0.34,0.7c0.16,0.21,0.38,0.36,0.64,0.47c0.27,0.11,0.6,0.16,1,0.16c0.22,0,0.45-0.02,0.69-0.08l0.66-0.19
l-0.24-0.92c-0.12,0.06-0.26,0.11-0.42,0.14C42.56,18.98,42.44,19,42.31,19c-0.42,0-0.72-0.11-0.87-0.33
c-0.17-0.22-0.25-0.55-0.25-0.97V14h1.97v-1h-1.97v-2.03h-1.03L40,13l-1.14,0.08V14h1.08V17.75z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M45.75,17.8c0.11-0.13,0.3-0.25,0.55-0.35
c0.25-0.09,0.59-0.18,1.01-0.26c0.41-0.07,0.92-0.13,1.55-0.19v1.19c-0.36,0.28-0.69,0.48-1,0.61c-0.31,0.14-0.66,0.2-1,0.2
c-0.38,0-0.67-0.05-0.92-0.17c-0.25-0.13-0.36-0.33-0.36-0.61C45.58,18.06,45.63,17.92,45.75,17.8z M44.97,19.55
c0.41,0.31,0.92,0.45,1.55,0.45c0.43,0,0.87-0.08,1.28-0.23c0.4-0.16,0.78-0.35,1.14-0.58h0.01L49.06,20h1.02v-4.19
c0-0.84-0.2-1.53-0.6-2.04c-0.4-0.5-1.04-0.77-1.93-0.77c-0.6,0-1.13,0.11-1.63,0.31c-0.5,0.21-0.9,0.41-1.23,0.61l0.5,0.86
c0.28-0.19,0.59-0.37,0.97-0.53c0.36-0.16,0.76-0.25,1.2-0.25c0.3,0,0.55,0.06,0.73,0.17c0.19,0.13,0.33,0.27,0.46,0.45
c0.11,0.19,0.18,0.41,0.23,0.65c0.05,0.25,0.08,0.48,0.08,0.73c-1.56,0.16-2.7,0.41-3.42,0.75c-0.72,0.36-1.06,0.87-1.06,1.53
C44.38,18.83,44.56,19.25,44.97,19.55z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M52.45,18c0.18,0.44,0.41,0.8,0.72,1.09
c0.3,0.3,0.66,0.52,1.08,0.68c0.42,0.15,0.88,0.23,1.36,0.23c0.44,0,0.86-0.08,1.27-0.25c0.4-0.16,0.76-0.39,1.1-0.67l-0.56-0.81
c-0.22,0.2-0.48,0.37-0.76,0.51c-0.28,0.16-0.6,0.22-0.94,0.22c-0.34,0-0.64-0.05-0.92-0.17c-0.28-0.13-0.53-0.3-0.72-0.52
c-0.19-0.22-0.35-0.47-0.45-0.78c-0.11-0.3-0.16-0.64-0.16-1.01c0-0.38,0.05-0.71,0.17-1.02c0.11-0.31,0.27-0.58,0.47-0.8
c0.19-0.22,0.44-0.39,0.72-0.51c0.28-0.13,0.58-0.19,0.92-0.19c0.28,0,0.55,0.06,0.78,0.19c0.24,0.12,0.47,0.26,0.69,0.45
l0.61-0.78c-0.25-0.22-0.55-0.42-0.89-0.59C56.59,13.09,56.17,13,55.7,13c-0.47,0-0.92,0.08-1.34,0.23
c-0.44,0.16-0.81,0.39-1.13,0.69c-0.31,0.31-0.57,0.67-0.76,1.11c-0.19,0.44-0.28,0.92-0.28,1.49C52.19,17.08,52.27,17.56,52.45,18
z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M59.94,17.75c0,0.34,0.03,0.64,0.11,0.92
c0.06,0.28,0.18,0.52,0.34,0.7c0.16,0.21,0.38,0.36,0.64,0.47c0.27,0.11,0.6,0.16,1,0.16c0.22,0,0.45-0.02,0.69-0.08l0.66-0.19
l-0.24-0.92c-0.12,0.06-0.26,0.11-0.42,0.14C62.56,18.98,62.44,19,62.31,19c-0.42,0-0.72-0.11-0.87-0.33
c-0.17-0.22-0.25-0.55-0.25-0.97V14h1.97v-1h-1.97v-2.03h-1.03L60,13l-1.14,0.08V14h1.08V17.75z"/>
</g>
</svg>
The website is made with wordpress, so the SVG's are getting implemented by wordpress.
I probably could fix that, by adjusting the view size of the SVG's, but i would have to do that with js and thats pretty dirty.


For me worked svg {overflow: visible;} . So far spotted this issue in Firefox only.

Related

SVG image does not show up in browsers

I have this SVG image, made in Inkscape which shows the following in Inkscape:
However, when I open the SVG in a browser (Chrome, Firefox), nothing appears. I have tried adding "simple" lines and objects to the image, and they DO appear, so it seems to be something with this specific object. What could it be? And how to fix it?
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="65.834572mm"
height="70.733879mm"
viewBox="0 0 65.834572 70.733879"
version="1.1"
id="svg13961"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
sodipodi:docname="test.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview13963"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.63874158"
inkscape:cx="161.25457"
inkscape:cy="270.06227"
inkscape:window-width="529"
inkscape:window-height="862"
inkscape:window-x="534"
inkscape:window-y="18"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs13958">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath16097">
<g
id="g16109">
<g
id="g16107"
transform="translate(162.0894,-8.96869)">
<g
id="g16105">
<g
id="g16103">
<g
id="g16101">
<path
d="M 0,595.2 H 841.7 V 0 H 0 Z"
id="path16099" />
</g>
</g>
</g>
</g>
</g>
</clipPath>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-61.940456,-78.545196)">
<path
d="m 384.899,184.03111 c 40.89063,-0.26977 82.65532,5.96811 119.21947,25.15083 23.45592,12.13347 47.3093,25.37475 74.13169,27.82215 6.70195,0.79044 13.4529,1.13004 20.19984,1.13002"
style="display:inline;opacity:1;fill:none;stroke:#000000;stroke-width:127.501;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path60"
clip-path="url(#clipPath16097)"
transform="matrix(0.00761114,0.32814968,0.35268292,-0.00818017,16.590019,-45.732392)" />
</g>
</svg>

Animate path loaded from external svg

When I define a simple path with an animation in a svg and use it immediately, everything works fine (see the following snippet)
<html>
<body>
<svg width='100%' height='100%' preserveAspectRatio="xMaxYMax">
<defs>
<symbol id="myloader" width="100%" height="100%" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 80">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeName="transform" attributeType="xml" dur="0.6s" from="0 25 25" repeatCount="indefinite" to="360 25 25" type="rotate"/>
</path>
</symbol>
</defs>
<use xlink:href="#myloader"></use>
</svg>
</body>
</html>
Now when I try to move this svg to an external file and load it from there, the svg is shown but the animation doesn't run.
loaders.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:xl="http://www.w3.org/1999/xlink" width="100%" height="100%" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 50 50;" version="1.1" viewBox="0 0 50 80">
<defs>
<symbol id="myloader" width="100%" height="100%" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 50 50;" viewBox="0 0 50 80">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeName="transform" attributeType="xml" dur="0.6s" from="0 25 25" repeatCount="indefinite" to="360 25 25" type="rotate"/>
</path>
</symbol>
</defs>
</svg>
html
<html>
<body>
<svg width='100%' height='100%' preserveAspectRatio="xMaxYMax">
<use xlink:href="loaders.svg#myloader"></use>
</svg>
</body>
</html>
Is this expected behaviour or am I doing something wrong. I want the animation to run from the external resource too.

SVG image format animation not working in IE11

I created a simple SVG animation image file and unfortunately I found that though it is displaying the animation is not working in ie11. Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
.track{fill:#D1D3D4;}
.marker{fill:#899FBC;}
</style>
<path class="track" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z M50,95.2C25,95.2,4.8,75,4.8,50
S25,4.7,50,4.7S95.2,25,95.2,50S75,95.2,50,95.2z"/>
<path class="marker" d="M95.2,50h4.8c0-27.6-22.4-50-50-50v4.8C75,4.7,95.2,25,95.2,50z">
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
from="0 50 50"
to="360 50 50"
dur=".8s"
repeatCount="indefinite"
/>
</path>
</svg>

d3 Select and modify g elements within svg elements

I'm having trouble selecting and manipulating (i want to add click behavior to) a path in inline svg code I produced in Inkscape and then pasted into my html file.
<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="905.1372px" height="1100px" viewBox="0 300 721.464 889.561" enable-background="new 0 0 721.464 889.561"
xml:space="preserve">
<g id="section3">
<path id="section"
d="m 433.125,729.14792 -0.17857,32.67857 32.32143,0.44643 15.89286,-0.44643 11.78571,-3.03572 -11.33928,-35.26785 -19.82143,5.625 z"/>
</g>
I've tried all sorts of way.. getelementbyid, d3.select("#id").. can anyone help?

Selecting by ID:
d3.select("#section3")
Check this demo, clicking on your path (you'll have to scroll down to find it):
d3.select("#section3").on("click", function(){
console.log("hello");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="905.1372px" height="1100px" viewBox="0 300 721.464 889.561" enable-background="new 0 0 721.464 889.561"
xml:space="preserve">
<g id="section3">
<path id="section"
d="m 433.125,729.14792 -0.17857,32.67857 32.32143,0.44643 15.89286,-0.44643 11.78571,-3.03572 -11.33928,-35.26785 -19.82143,5.625 z"/>
</g>

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