我正在尝试使用svg动画来让蜻蜓拍打翅膀。
我这样做是通过缩放x轴上的左右翼。问题是当我缩放它时机翼移动。我希望机翼的左边缘或右边缘在缩放时留在一个位置。
这是一个翼的代码
<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>
以下是整个svg代码，您可以在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>
答案 0 :(得分：2)
这里的问题是所有比例变换的原点都在（0,0），它位于SVG的左上角。因此，您的缩放动画集中在SVG的左侧（x = 0）。
基本上你需要移动机翼的坐标空间，这样当应用比例时，机翼以x = 0为中心。
所以步骤是：
例如：
<g id="wings" transform="translate(270,0)">
<g>
<g transform="translate(-270,0)">
<g "left wing">
<g "right wing">
</g>
<animateTransform .../>
</g>
</g>