问题
How can I make the red bar skew into the position of the green?
I am trying to animate a logo with SVG animation. Therefore I am using skewX and transition for the animateTransform, but somehow only the skewX animation is executed. The transition seems not to work. (if I run the animations without the text part it works, but all together, seems to be conflicting.
Updated (to be more clear): The group with the ID "Bar-Falling" has 2 animations:
<animateTransform attributeName="transform" type="skewX" ..
and
<animateTransform attributeName="transform" type="translate" ...
Why is the translate animation not working?
Any help appreciated.
<svg xmlns="http://www.w3.org/2000/svg" width="1492.94" height="157.41" viewBox="0 0 1492.94 157.41">
<g id="Socia">
<path d="M36,117.5a23,23,0,0,0,7.3,8.5A29.61,29.61,0,0,0,54,130.8a48.92,48.92,0,0,0,12.6,1.6,75.9,75.9,0,0,0,9.5-.7,34.66,34.66,0,0,0,9.5-2.8A21.28,21.28,0,0,0,93,123a14.49,14.49,0,0,0,3-9.4,13.49,13.49,0,0,0-3.9-9.9,30,30,0,0,0-10.2-6.3A107,107,0,0,0,67.58,93c-5.3-1.3-10.8-2.7-16.3-4.2a130.32,130.32,0,0,1-16.4-5.2,55.48,55.48,0,0,1-14.3-7.9,36.83,36.83,0,0,1-10.4-12.2,36.88,36.88,0,0,1-3.9-17.6,38.27,38.27,0,0,1,5-20.1,44.16,44.16,0,0,1,13-14.2,55.38,55.38,0,0,1,18.1-8.4A76.8,76.8,0,0,1,62.58.5a102.66,102.66,0,0,1,22.7,2.6,56.65,56.65,0,0,1,19.3,8.5A43.2,43.2,0,0,1,118,26.7,46.44,46.44,0,0,1,123,49H91a29,29,0,0,0-2.9-11.2,19.51,19.51,0,0,0-6.4-7,29.43,29.43,0,0,0-9.2-3.6,53.39,53.39,0,0,0-11.3-1,42.55,42.55,0,0,0-8,.8,21.89,21.89,0,0,0-7.3,2.9,19.1,19.1,0,0,0-5.3,5.3,14.83,14.83,0,0,0-2.2,8,12.77,12.77,0,0,0,1.8,7.1,15.36,15.36,0,0,0,6.6,5.2,81.69,81.69,0,0,0,13.7,4.6c5.8,1.5,13.5,3.5,22.9,5.9,2.8.6,6.7,1.6,11.7,3.1A55.17,55.17,0,0,1,110,76.2a45.3,45.3,0,0,1,12.8,13c3.6,5.4,5.3,12.3,5.3,20.8a45.31,45.31,0,0,1-4,19.2,40.82,40.82,0,0,1-11.9,15.1,55.62,55.62,0,0,1-19.5,10,95.22,95.22,0,0,1-27.1,3.6,93.77,93.77,0,0,1-24.2-2.9,62,62,0,0,1-20.7-9.6,47.67,47.67,0,0,1-14.2-16.7,48.29,48.29,0,0,1-5.3-24.1h32.1A28.77,28.77,0,0,0,36,117.5" transform="translate(-1.14 -0.5)" style="fill: #fac800"/>
<path d="M143.18,76.75a49.66,49.66,0,0,1,29.1-29.7,68,68,0,0,1,46.5,0A49.82,49.82,0,0,1,248,76.75a66,66,0,0,1,4,23.7,65.09,65.09,0,0,1-4,23.6,51.54,51.54,0,0,1-11.4,18,48.77,48.77,0,0,1-17.8,11.5,64.22,64.22,0,0,1-23.3,4,65.49,65.49,0,0,1-23.2-4,49.62,49.62,0,0,1-17.8-11.5,51.54,51.54,0,0,1-11.4-18,65.82,65.82,0,0,1-4-23.6,68.74,68.74,0,0,1,4.1-23.7m27.2,36.5a34.71,34.71,0,0,0,4.3,11.2,22.7,22.7,0,0,0,8.1,7.9,24.48,24.48,0,0,0,12.7,2.9,26.12,26.12,0,0,0,12.8-2.9,22.2,22.2,0,0,0,8.2-7.9,31.81,31.81,0,0,0,4.3-11.2,61.1,61.1,0,0,0,1.3-12.8,62.74,62.74,0,0,0-1.3-12.9,31.81,31.81,0,0,0-4.3-11.2,23.82,23.82,0,0,0-8.2-7.9,25.79,25.79,0,0,0-12.8-3.1,23.71,23.71,0,0,0-12.7,3.1,24.48,24.48,0,0,0-8.1,7.9,31.81,31.81,0,0,0-4.3,11.2,61.37,61.37,0,0,0-1.3,12.9,60.43,60.43,0,0,0,1.3,12.8" transform="translate(-1.14 -0.5)" style="fill: #fac800"/>
<path d="M320.53,65.1a20.57,20.57,0,0,0-12,3.3,26.45,26.45,0,0,0-7.9,8.4,35.46,35.46,0,0,0-4.3,11.5,65.27,65.27,0,0,0-1.3,12.4,53.8,53.8,0,0,0,1.3,12,40.1,40.1,0,0,0,4.1,11.1,24.56,24.56,0,0,0,7.6,8.1,21.19,21.19,0,0,0,11.8,3.2c7.2,0,12.7-2,16.6-6a28.73,28.73,0,0,0,7.3-16.1h29c-2,14.5-7.6,25.5-16.9,33.1s-21.2,11.4-35.6,11.4a59.53,59.53,0,0,1-22.5-4.2,50.81,50.81,0,0,1-17.4-11.5,51.79,51.79,0,0,1-11.2-17.6,61.58,61.58,0,0,1-4-22.4,72.21,72.21,0,0,1,3.7-23.5,53.89,53.89,0,0,1,10.9-18.8,48.82,48.82,0,0,1,17.5-12.3,57.9,57.9,0,0,1,23.6-4.4,69.64,69.64,0,0,1,18.7,2.5,50.38,50.38,0,0,1,16,7.7,39.67,39.67,0,0,1,16.6,31h-29.3c-2.1-12.7-9.5-19-22.3-18.9" transform="translate(-1.14 -0.5)" style="fill: #fac800"/>
<rect x="386.78" y="44.39" width="29.9" height="109" style="fill: #fac800"/>
<rect x="386.48" y="3.5" width="29.9" height="24.39" style="fill: #fac800"/>
<path d="M508.33,111.74a49.13,49.13,0,0,1-.5,6.7,24,24,0,0,1-2.8,8.3,20.12,20.12,0,0,1-7.1,7.1c-3.2,2-7.8,3-13.7,3a39.35,39.35,0,0,1-6.9-.6,17.52,17.52,0,0,1-5.9-2.2,10.38,10.38,0,0,1-4-4.3,16.38,16.38,0,0,1,0-13.7,13,13,0,0,1,3.9-4.5,17.82,17.82,0,0,1,5.7-2.8q3.3-1,6.6-1.8c2.4-.4,4.8-.8,7.1-1.1s4.7-.6,6.9-1a42.07,42.07,0,0,0,6.1-1.6,12.08,12.08,0,0,0,4.7-2.6ZM469,78.54c.6-5.9,2.5-10.1,5.9-12.7s8-3.8,14-3.8a63,63,0,0,1,7.5.5,16.4,16.4,0,0,1,6.1,2.1,11.81,11.81,0,0,1,4.2,4.4,15.71,15.71,0,0,1,1.6,7.7,8.25,8.25,0,0,1-2.7,7.1,20.59,20.59,0,0,1-8.1,3.7,75.83,75.83,0,0,1-11.6,1.9c-4.3.4-8.8,1-13.3,1.7a120.86,120.86,0,0,0-13.3,2.8,39.23,39.23,0,0,0-11.8,5.3,27.7,27.7,0,0,0-8.4,9.6,32.25,32.25,0,0,0-3.3,15.3,34.11,34.11,0,0,0,2.8,14.5,27,27,0,0,0,7.9,10.1,33.43,33.43,0,0,0,11.9,6,54.46,54.46,0,0,0,14.5,1.9,66.48,66.48,0,0,0,19.8-3,39.48,39.48,0,0,0,16.9-10.3,45.11,45.11,0,0,0,.7,5.3,33.42,33.42,0,0,0,1.4,5.2h30.4a25.69,25.69,0,0,1-3-10.1,112.67,112.67,0,0,1-.8-14.2V73a26.57,26.57,0,0,0-4.4-16,29.58,29.58,0,0,0-11.5-9.2,51.51,51.51,0,0,0-15.4-4.5,116.21,116.21,0,0,0-16.7-1.2,90.08,90.08,0,0,0-18,1.8,51.32,51.32,0,0,0-16.1,6,36.1,36.1,0,0,0-11.8,11.2,34.16,34.16,0,0,0-5.3,17.5Z" transform="translate(-1.14 -0.5)" style="fill: #fac800"/>
</g>
<g id="Bar-Falling">
<rect x="555.29" y="3.59" width="33.1" height="150.6" style="fill: #F11344" >
<animateTransform
attributeName="transform"
type="skewX"
from="0"
to="-20"
begin="0.5s"
dur="0.2s"
repeatCount="1"
fill="freeze"/>
<animateTransform
attributeName="transform"
type="translate"
from="0"
to="20"
begin="0.5s"
dur="0.2s"
repeatCount="1"
fill="freeze"
additive="sum"/>
</rect>
</g>
<g id="Placeholder-For-Where-Bar-Should-Be-Positioned-After-Animation">
<polygon points="645.83 3.59 588.13 154.19 555.63 154.19 613.33 3.59 645.83 3.59" style="fill: #00ff00">
</polygon>
</g>
<g id="Bar-1">
<rect x="666.29" y="3.59" width="33.1" height="150.6" style="fill: #fac800">
<animate
attributeType="CSS"
attributeName="opacity"
begin="0.2s"
from="0"
to="1"
dur="1s"/>
<animate
attributeType="CSS"
attributeName="opacity"
from="0"
to="0"
dur="0.2s"/>
</rect>
</g>
<g id="Bar-2">
<rect x="722.44" y="4.09" width="33.1" height="150.6" transform="translate(-1.37 1.61) rotate(-0.16)" style="fill: #fac800">
<animate
attributeType="CSS"
attributeName="opacity"
begin="0.3s"
from="0"
to="1"
dur="1s"/>
<animate
attributeType="CSS"
attributeName="opacity"
from="0"
to="0"
dur="0.3s"/>
</rect>
</g>
<g id="Income">
<animateTransform
attributeName="transform"
type="translate"
additive="sum"
from="-120"
to="0"
begin="0s"
dur="0.3s"
repeatCount="1"
fill="freeze"
/>
<rect id="I" x="777.18" y="3.59" width="33.1" height="150.6" style="fill: #fac800">
</rect>
<path id="N" d="M862.43,45.82V61h.6a34,34,0,0,1,14.8-13.8,42.53,42.53,0,0,1,18.5-4.3,51.05,51.05,0,0,1,19.7,3.3,29.52,29.52,0,0,1,12.2,9,35.46,35.46,0,0,1,6.2,14.2,95.87,95.87,0,0,1,1.8,18.5v67h-30V93.22q0-13.5-4.2-20.1c-2.8-4.4-7.8-6.7-15-6.7-8.1,0-14.1,2.4-17.8,7.3s-5.5,12.8-5.5,23.9v57.2h-29.9v-109Z" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
<path id="C" d="M1008.48,65.1a21.34,21.34,0,0,0-12,3.3,25.09,25.09,0,0,0-7.8,8.4,35.79,35.79,0,0,0-4.3,11.4,65.27,65.27,0,0,0-1.3,12.4,53.8,53.8,0,0,0,1.3,12,40.1,40.1,0,0,0,4.1,11.1,24.89,24.89,0,0,0,7.6,8.2,21.41,21.41,0,0,0,11.8,3.2c7.1,0,12.6-2,16.6-6a28.73,28.73,0,0,0,7.3-16.1h28.9c-2,14.5-7.6,25.5-16.9,33.1s-21.1,11.4-35.6,11.3a57.17,57.17,0,0,1-22.4-4.2,50.81,50.81,0,0,1-17.4-11.5,51.79,51.79,0,0,1-11.2-17.6,61.58,61.58,0,0,1-4-22.4,72.21,72.21,0,0,1,3.7-23.5,53.89,53.89,0,0,1,10.9-18.8,48.82,48.82,0,0,1,17.5-12.3,57.9,57.9,0,0,1,23.6-4.4,69.64,69.64,0,0,1,18.7,2.5,50.38,50.38,0,0,1,16,7.7,39.7,39.7,0,0,1,16.6,31.1h-29.3c-2.1-12.7-9.5-18.9-22.4-18.9" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
<path id="O" d="M1075.53,76.75a49.66,49.66,0,0,1,29.1-29.7,68,68,0,0,1,46.5,0,49.82,49.82,0,0,1,29.2,29.7,66,66,0,0,1,4,23.7,65.09,65.09,0,0,1-4,23.6,51.54,51.54,0,0,1-11.4,18,48.77,48.77,0,0,1-17.8,11.5,64.22,64.22,0,0,1-23.3,4,65.49,65.49,0,0,1-23.2-4,49.62,49.62,0,0,1-17.8-11.5,51.54,51.54,0,0,1-11.4-18,65.82,65.82,0,0,1-4-23.6,68.74,68.74,0,0,1,4.1-23.7m27.2,36.5a34.71,34.71,0,0,0,4.3,11.2,22.7,22.7,0,0,0,8.1,7.9,24.48,24.48,0,0,0,12.7,2.9,26.12,26.12,0,0,0,12.8-2.9,22.2,22.2,0,0,0,8.2-7.9,31.81,31.81,0,0,0,4.3-11.2,61.1,61.1,0,0,0,1.3-12.8,62.74,62.74,0,0,0-1.3-12.9,31.81,31.81,0,0,0-4.3-11.2,23.82,23.82,0,0,0-8.2-7.9,25.79,25.79,0,0,0-12.8-3.1,23.71,23.71,0,0,0-12.7,3.1,24.48,24.48,0,0,0-8.1,7.9,31.81,31.81,0,0,0-4.3,11.2,61.37,61.37,0,0,0-1.3,12.9,60.43,60.43,0,0,0,1.3,12.8" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
<path id="M" d="M1229.53,45.34v14.8h.4a42.4,42.4,0,0,1,14.2-13.1,37.49,37.49,0,0,1,19.1-4.6,42.79,42.79,0,0,1,19,4.1,26.94,26.94,0,0,1,13,14.2,47,47,0,0,1,13.2-12.7,36,36,0,0,1,19.7-5.5,61.65,61.65,0,0,1,16,2.1,32.63,32.63,0,0,1,12.6,6.7,30.31,30.31,0,0,1,8.2,12.1,50.43,50.43,0,0,1,3,18v72.9H1338V92.64c0-3.6-.2-7.1-.4-10.3a22.39,22.39,0,0,0-2.3-8.4,14,14,0,0,0-5.6-5.7,20.34,20.34,0,0,0-10-2.2,19,19,0,0,0-10.2,2.4,17,17,0,0,0-6.1,6.4,25.86,25.86,0,0,0-2.9,8.9,67.25,67.25,0,0,0-.7,10v60.7h-29.9V93.24c0-3.2,0-6.4-.2-9.6a26.56,26.56,0,0,0-1.8-8.8,13.84,13.84,0,0,0-5.3-6.4,20.26,20.26,0,0,0-10.8-2.5,21.25,21.25,0,0,0-5.6,1,16.77,16.77,0,0,0-6.7,3.6,22.1,22.1,0,0,0-5.6,7.6,30.3,30.3,0,0,0-2.3,13v63.4h-29.9v-109Z" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
<path id="E" d="M1422.58,128c4.5,4.4,11,6.5,19.4,6.5a27.06,27.06,0,0,0,15.6-4.5c4.3-3,7-6.2,8-9.6H1492c-4.2,13-10.7,22.4-19.4,28s-19.2,8.5-31.6,8.4a62.37,62.37,0,0,1-23.3-4.2,49.43,49.43,0,0,1-17.5-11.7,53.12,53.12,0,0,1-10.9-18.1,65.4,65.4,0,0,1-3.9-23.2,63.24,63.24,0,0,1,3.9-22.8,52.6,52.6,0,0,1,29-30.4A57,57,0,0,1,1441,42a51.87,51.87,0,0,1,24.2,5.3,48.45,48.45,0,0,1,17,14.5,58.48,58.48,0,0,1,9.6,20.7,76.29,76.29,0,0,1,2.1,24.3h-78.7c.5,9.8,2.9,16.9,7.4,21.2m33.9-57.3c-3.6-3.9-9-5.9-16.3-5.9a27,27,0,0,0-11.9,2.4,23.25,23.25,0,0,0-7.6,6,21.33,21.33,0,0,0-4,7.6,34.33,34.33,0,0,0-1.4,7.1h48.6c-1.4-7.6-3.9-13.3-7.4-17.2" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
</g>
</svg>来源：https://stackoverflow.com/questions/61441154/animate-svg-with-animatetransform-translate-skew