SVG 组件在动画之前稍微平移
SVG component translates slightly before animating
我有这个 SVG Vue 组件，我已经设置动画来回旋转一次：
<template>
<div class="handshake_image">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<circle class="cls-1" cx="203.53" cy="200" r="144"/>
<g class="handshake">
<path class="cls-2"
d="M189,288.44h32.28a9.39,9.39,0,0,1,9.39,9.39v9a9.39,9.39,0,0,1-9.39,9.39H189a13.89,13.89,0,0,1-13.89-13.89v0A13.89,13.89,0,0,1,189,288.44Z"
transform="translate(-154.35 232.02) rotate(-45)"/>
<path class="cls-2"
d="M183.53,270.86h78.84a0,0,0,0,1,0,0v27.78a0,0,0,0,1,0,0H183.53a4.5,4.5,0,0,1-4.5-4.5V275.36A4.5,4.5,0,0,1,183.53,270.86Z"
transform="translate(-136.71 239.46) rotate(-45)"/>
<path class="cls-3"
d="M220.7,147.25,260,108l58.93,58.93-39.29,39.28,0,0a27.71,27.71,0,0,1,0,39.2L260,265.11l-78.57-78.57,19.64-19.64"/>
<path class="cls-4" d="M181.42,186.54a55.55,55.55,0,0,0,78.57,0"/>
<path class="cls-2" d="M220.7,186.54a55.55,55.55,0,0,1-78.57,0"/>
<rect class="cls-3" x="271.49" y="91.7" width="55.56" height="111.12"
transform="translate(-16.47 254.75) rotate(-45)"/>
<rect class="cls-5" x="296.92" y="69.31" width="55.56" height="125.72"
transform="translate(1.65 268.31) rotate(-45)"/>
<path class="cls-6"
d="M139.67,104.67,285,250a13.89,13.89,0,0,1-19.64,19.64,13.89,13.89,0,1,1-19.64,19.65,13.89,13.89,0,0,1-19.64,19.64,13.89,13.89,0,0,1-19.65,19.64L118,240.11A27.65,27.65,0,0,1,118,201l.06-.07L80.74,163.6Z"/>
<line class="cls-7" x1="226.08" y1="308.93" x2="196.97" y2="279.82"/>
<line class="cls-7" x1="245.72" y1="289.29" x2="216.61" y2="260.18"/>
<line class="cls-7" x1="265.36" y1="269.64" x2="236.25" y2="240.54"/>
<rect class="cls-3" x="48" y="119.6" width="111.12" height="55.56"
transform="translate(-73.88 116.39) rotate(-45)"/>
<rect class="cls-5" x="11.95" y="105.25" width="129.12" height="55.56"
transform="translate(-71.66 93.06) rotate(-45)"/>
<rect class="cls-2" x="131.76" y="239.33" width="83.34" height="27.78" rx="13.89"
transform="translate(-128.26 196.8) rotate(-45)"/>
<rect class="cls-2" x="116.19" y="229.51" width="55.56" height="27.78" rx="13.89"
transform="translate(-129.94 173.09) rotate(-45)"/>
<rect class="cls-2" x="155.47" y="268.8" width="55.56" height="27.78" rx="13.89"
transform="translate(-146.22 212.38) rotate(-45)"/>
<rect class="cls-2" x="179.18" y="298.26" width="27.78" height="27.78" rx="13.89"
transform="translate(-164.17 227.95) rotate(-45)"/>
<path class="cls-3"
d="M201.49,166.46,152,216a13.88,13.88,0,0,1-19.64,0h0a13.89,13.89,0,0,1,0-19.64l49.11-49.11a27.77,27.77,0,0,1,39.28,0h0"/>
<circle class="cls-8" cx="318.68" cy="186.54" r="8"/>
<path class="cls-9" d="M318.68,179.54a7,7,0,1,1-7,7,7,7,0,0,1,7-7m0-2a9,9,0,1,0,9,9,9,9,0,0,0-9-9Z"/>
<circle class="cls-8" cx="82.85" cy="186.54" r="8"/>
<path class="cls-9" d="M82.85,179.54a7,7,0,1,1-7,7,7,7,0,0,1,7-7m0-2a9,9,0,1,0,9,9,9,9,0,0,0-9-9Z"/>
<circle class="cls-2" cx="193" cy="233.3" r="9"/>
<circle class="cls-2" cx="152.97" cy="234.88" r="9"/>
<path class="cls-2" d="M131,261.78a9,9,0,0,1-4.89-4.89"/>
<path class="cls-2" d="M151,281.78a9,9,0,0,1-4.89-4.89"/>
<path class="cls-2" d="M171,301.78a9,9,0,0,1-4.89-4.89"/>
<path class="cls-6" d="M223.41,321.89a9,9,0,0,1-4.89,4.89"/>
<path class="cls-6" d="M243.41,301.89a9,9,0,0,1-4.89,4.89"/>
<path class="cls-6" d="M262.41,282.89a9,9,0,0,1-4.89,4.89"/>
<path class="cls-6" d="M282.41,262.89a9,9,0,0,1-4.89,4.89"/>
<circle class="cls-2" cx="193.39" cy="273.18" r="9"/>
<path class="cls-2" d="M186.64,306.09a9,9,0,0,0,12.72,12.73Z"/>
<path class="cls-2" d="M125.42,203.36l3.44,3.43,5.14-5.14a5,5,0,0,0,0-7h0Z"/>
<line class="cls-2" x1="168.43" y1="248.22" x2="177.84" y2="257.63"/>
<line class="cls-2" x1="173.13" y1="258.92" x2="167.13" y2="252.92"/>
<line class="cls-2" x1="178.17" y1="251.96" x2="174.1" y2="247.89"/>
<line class="cls-2" x1="158.17" y1="178.96" x2="154.1" y2="174.89"/>
<line class="cls-2" x1="159.13" y1="173.92" x2="157.1" y2="171.89"/>
<line class="cls-2" x1="153.13" y1="179.92" x2="151.1" y2="177.89"/>
<line class="cls-10" x1="233.25" y1="242.54" x2="238.08" y2="237.72"/>
<line class="cls-10" x1="214.25" y1="262.54" x2="219.08" y2="257.72"/>
</g>
</svg>
</div>
</template>
<style scoped lang="scss">
.handshake_image {
width: 450px;
height: 420px;
}
.handshake {
animation: handshake_rotate 1.58s forwards;
transform-box: fill-box;
transform-origin: left center;
}
.handshake * {
transform-origin: top left;
}
.handshake_animations {
@keyframes handshake_rotate {
0% {
transform: rotate(-10deg);
}
47% {
transform: rotate(10deg);
}
48% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}
}
</style>
但是，在加载时，图像的动画部分出现在它需要的位置的右侧，然后立即移动到适当的位置并进行动画处理。
任何具有 SVG 知识的人都知道为什么会这样？我以前制作过一些像这样的图像，但通常是几个部分的组合，而不是几乎整个 SVG 对象
弄清楚了 - 尽管处于条件 class 中，但关键帧仍保持活动状态：引用关键帧的 class 需要进入条件 class！
<style scoped lang="scss">
.handshake_image {
width: 450px;
height: 420px;
}
.handshake {
transform-origin: top left;
}
@keyframes handshake_rotate {
0% {
transform: rotate(-10deg);
}
47% {
transform: rotate(10deg);
}
48% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}
.handshake_animations {
.handshake {
animation: handshake_rotate 1.58s forwards;
transform-box: fill-box;
transform-origin: left center;
}
}
</style>
希望有人能从中得到一些用处！
我有这个 SVG Vue 组件，我已经设置动画来回旋转一次：
<template>
<div class="handshake_image">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<circle class="cls-1" cx="203.53" cy="200" r="144"/>
<g class="handshake">
<path class="cls-2"
d="M189,288.44h32.28a9.39,9.39,0,0,1,9.39,9.39v9a9.39,9.39,0,0,1-9.39,9.39H189a13.89,13.89,0,0,1-13.89-13.89v0A13.89,13.89,0,0,1,189,288.44Z"
transform="translate(-154.35 232.02) rotate(-45)"/>
<path class="cls-2"
d="M183.53,270.86h78.84a0,0,0,0,1,0,0v27.78a0,0,0,0,1,0,0H183.53a4.5,4.5,0,0,1-4.5-4.5V275.36A4.5,4.5,0,0,1,183.53,270.86Z"
transform="translate(-136.71 239.46) rotate(-45)"/>
<path class="cls-3"
d="M220.7,147.25,260,108l58.93,58.93-39.29,39.28,0,0a27.71,27.71,0,0,1,0,39.2L260,265.11l-78.57-78.57,19.64-19.64"/>
<path class="cls-4" d="M181.42,186.54a55.55,55.55,0,0,0,78.57,0"/>
<path class="cls-2" d="M220.7,186.54a55.55,55.55,0,0,1-78.57,0"/>
<rect class="cls-3" x="271.49" y="91.7" width="55.56" height="111.12"
transform="translate(-16.47 254.75) rotate(-45)"/>
<rect class="cls-5" x="296.92" y="69.31" width="55.56" height="125.72"
transform="translate(1.65 268.31) rotate(-45)"/>
<path class="cls-6"
d="M139.67,104.67,285,250a13.89,13.89,0,0,1-19.64,19.64,13.89,13.89,0,1,1-19.64,19.65,13.89,13.89,0,0,1-19.64,19.64,13.89,13.89,0,0,1-19.65,19.64L118,240.11A27.65,27.65,0,0,1,118,201l.06-.07L80.74,163.6Z"/>
<line class="cls-7" x1="226.08" y1="308.93" x2="196.97" y2="279.82"/>
<line class="cls-7" x1="245.72" y1="289.29" x2="216.61" y2="260.18"/>
<line class="cls-7" x1="265.36" y1="269.64" x2="236.25" y2="240.54"/>
<rect class="cls-3" x="48" y="119.6" width="111.12" height="55.56"
transform="translate(-73.88 116.39) rotate(-45)"/>
<rect class="cls-5" x="11.95" y="105.25" width="129.12" height="55.56"
transform="translate(-71.66 93.06) rotate(-45)"/>
<rect class="cls-2" x="131.76" y="239.33" width="83.34" height="27.78" rx="13.89"
transform="translate(-128.26 196.8) rotate(-45)"/>
<rect class="cls-2" x="116.19" y="229.51" width="55.56" height="27.78" rx="13.89"
transform="translate(-129.94 173.09) rotate(-45)"/>
<rect class="cls-2" x="155.47" y="268.8" width="55.56" height="27.78" rx="13.89"
transform="translate(-146.22 212.38) rotate(-45)"/>
<rect class="cls-2" x="179.18" y="298.26" width="27.78" height="27.78" rx="13.89"
transform="translate(-164.17 227.95) rotate(-45)"/>
<path class="cls-3"
d="M201.49,166.46,152,216a13.88,13.88,0,0,1-19.64,0h0a13.89,13.89,0,0,1,0-19.64l49.11-49.11a27.77,27.77,0,0,1,39.28,0h0"/>
<circle class="cls-8" cx="318.68" cy="186.54" r="8"/>
<path class="cls-9" d="M318.68,179.54a7,7,0,1,1-7,7,7,7,0,0,1,7-7m0-2a9,9,0,1,0,9,9,9,9,0,0,0-9-9Z"/>
<circle class="cls-8" cx="82.85" cy="186.54" r="8"/>
<path class="cls-9" d="M82.85,179.54a7,7,0,1,1-7,7,7,7,0,0,1,7-7m0-2a9,9,0,1,0,9,9,9,9,0,0,0-9-9Z"/>
<circle class="cls-2" cx="193" cy="233.3" r="9"/>
<circle class="cls-2" cx="152.97" cy="234.88" r="9"/>
<path class="cls-2" d="M131,261.78a9,9,0,0,1-4.89-4.89"/>
<path class="cls-2" d="M151,281.78a9,9,0,0,1-4.89-4.89"/>
<path class="cls-2" d="M171,301.78a9,9,0,0,1-4.89-4.89"/>
<path class="cls-6" d="M223.41,321.89a9,9,0,0,1-4.89,4.89"/>
<path class="cls-6" d="M243.41,301.89a9,9,0,0,1-4.89,4.89"/>
<path class="cls-6" d="M262.41,282.89a9,9,0,0,1-4.89,4.89"/>
<path class="cls-6" d="M282.41,262.89a9,9,0,0,1-4.89,4.89"/>
<circle class="cls-2" cx="193.39" cy="273.18" r="9"/>
<path class="cls-2" d="M186.64,306.09a9,9,0,0,0,12.72,12.73Z"/>
<path class="cls-2" d="M125.42,203.36l3.44,3.43,5.14-5.14a5,5,0,0,0,0-7h0Z"/>
<line class="cls-2" x1="168.43" y1="248.22" x2="177.84" y2="257.63"/>
<line class="cls-2" x1="173.13" y1="258.92" x2="167.13" y2="252.92"/>
<line class="cls-2" x1="178.17" y1="251.96" x2="174.1" y2="247.89"/>
<line class="cls-2" x1="158.17" y1="178.96" x2="154.1" y2="174.89"/>
<line class="cls-2" x1="159.13" y1="173.92" x2="157.1" y2="171.89"/>
<line class="cls-2" x1="153.13" y1="179.92" x2="151.1" y2="177.89"/>
<line class="cls-10" x1="233.25" y1="242.54" x2="238.08" y2="237.72"/>
<line class="cls-10" x1="214.25" y1="262.54" x2="219.08" y2="257.72"/>
</g>
</svg>
</div>
</template>
<style scoped lang="scss">
.handshake_image {
width: 450px;
height: 420px;
}
.handshake {
animation: handshake_rotate 1.58s forwards;
transform-box: fill-box;
transform-origin: left center;
}
.handshake * {
transform-origin: top left;
}
.handshake_animations {
@keyframes handshake_rotate {
0% {
transform: rotate(-10deg);
}
47% {
transform: rotate(10deg);
}
48% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}
}
</style>
但是，在加载时，图像的动画部分出现在它需要的位置的右侧，然后立即移动到适当的位置并进行动画处理。 任何具有 SVG 知识的人都知道为什么会这样？我以前制作过一些像这样的图像，但通常是几个部分的组合，而不是几乎整个 SVG 对象
弄清楚了 - 尽管处于条件 class 中，但关键帧仍保持活动状态：引用关键帧的 class 需要进入条件 class！
<style scoped lang="scss">
.handshake_image {
width: 450px;
height: 420px;
}
.handshake {
transform-origin: top left;
}
@keyframes handshake_rotate {
0% {
transform: rotate(-10deg);
}
47% {
transform: rotate(10deg);
}
48% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}
.handshake_animations {
.handshake {
animation: handshake_rotate 1.58s forwards;
transform-box: fill-box;
transform-origin: left center;
}
}
</style>
希望有人能从中得到一些用处！