html - SVG元素在CSS中动画时改变它的位置
问题描述
我在这里有图像作为 HTML 下面的 SVG 代码，我正在尝试对其进行动画处理，所以我选择了手id来做简单的动画，但是当应用下面的 CSS 动画时，它改变了手的位置（比如向上或向下）。但是，我做了同样的事情之前使用另一个 svg 的代码，它可以工作：/，有什么帮助吗？并提前感谢
#hand {
animation: rotate-left 4s linear infinite;
}
@-webkit-keyframes rotate-left {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(0.5deg);
}
}<svg id="b284e515-97d4-40b6-a45d-73d07a6575b3" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 989 766.08668">
<title>sharing_articles</title>
<path
d="M708.60559,514.115h-193.913c9.02555-97.32363,14.66627-189.31511,0-249.31677h193.913C705.27077,342.48286,705.65846,426.21865,708.60559,514.115Z"
transform="translate(-105.5 -66.95666)" fill="#3f3d56" />
<rect x="443.81988" y="237.31677" width="124.65839" height="83.10559" fill="#b75cf9" />
<rect x="432.73913" y="349.50932" width="146.81988" height="2.77019" fill="#b75cf9" />
<rect x="432.73913" y="361.97516" width="146.81988" height="2.77019" fill="#b75cf9" />
<rect x="432.73913" y="374.44099" width="146.81988" height="2.77019" fill="#b75cf9" />
<rect x="432.73913" y="386.90683" width="146.81988" height="2.77019" fill="#b75cf9" />
<rect x="432.73913" y="399.37267" width="146.81988" height="2.77019" fill="#b75cf9" />
<path
d="M767.85546,489.22558a6.61617,6.61617,0,0,0-3.90106,1.37252c-3.32485-8.78666-8.47195-14.43325-14.25444-14.43325s-10.9296,5.64659-14.25445,14.43325a6.61614,6.61614,0,0,0-3.90105-1.37252c-6.56942,0-11.895,11.11024-11.895,24.8154h60.101C779.75044,500.33582,774.42487,489.22558,767.85546,489.22558Z"
transform="translate(-105.5 -66.95666)" fill="#b75cf9" />
<path
d="M776.98025,514.041H691.94784v-1.3851c0-19.82279,7.76-35.351,17.666-35.351a9.84192,9.84192,0,0,1,4.65981,1.2079c4.96551-12.15474,12.26768-19.08426,20.19-19.08426s15.2252,6.92952,20.19071,19.08426a9.84192,9.84192,0,0,1,4.65981-1.2079c9.906,0,17.666,15.52819,17.666,35.351Zm-82.248-2.77019h79.46363c-.34492-17.04855-7.01947-31.19571-14.88163-31.19571a7.69853,7.69853,0,0,0-4.52726,1.615l-1.46692,1.06317-.64047-1.69484c-4.536-11.98566-11.17543-18.85972-18.21587-18.85972s-13.67915,6.87406-18.2152,18.85972l-.64047,1.69484-1.46692-1.06317a7.69853,7.69853,0,0,0-4.52726-1.615C701.7517,480.07508,695.07715,494.22224,694.73223,511.27079Z"
transform="translate(-105.5 -66.95666)" fill="#3f3d56" />
<path
d="M490.83682,489.22558a6.61614,6.61614,0,0,0-3.901,1.37252c-3.32485-8.78666-8.47195-14.43325-14.25445-14.43325s-10.92959,5.64659-14.25444,14.43325a6.61617,6.61617,0,0,0-3.90106-1.37252c-6.56941,0-11.895,11.11024-11.895,24.8154h60.101C502.7318,500.33582,497.40624,489.22558,490.83682,489.22558Z"
transform="translate(-105.5 -66.95666)" fill="#b75cf9" />
<path
d="M499.96162,514.041H414.92921v-1.3851c0-19.82279,7.76-35.351,17.666-35.351a9.842,9.842,0,0,1,4.65981,1.2079c4.96551-12.15474,12.26768-19.08426,20.19-19.08426s15.22521,6.92952,20.19071,19.08426a9.842,9.842,0,0,1,4.65981-1.2079c9.906,0,17.666,15.52819,17.666,35.351Zm-82.248-2.77019h79.46364c-.34492-17.04855-7.01948-31.19571-14.88164-31.19571a7.69848,7.69848,0,0,0-4.52725,1.615l-1.46693,1.06317-.64047-1.69484c-4.536-11.98566-11.17543-18.85972-18.21587-18.85972s-13.67914,6.87406-18.21519,18.85972l-.64047,1.69484-1.46693-1.06317a7.69848,7.69848,0,0,0-4.52725-1.615C424.73307,480.07508,418.05852,494.22224,417.71359,511.27079Z"
transform="translate(-105.5 -66.95666)" fill="#3f3d56" />
<path
d="M1094.5,302.95666a148.13534,148.13534,0,1,1-151.39-147.96c.46-.01.92-.02,1.39-.03.66-.01,1.33-.01,2-.01,1.68,0,3.36.03,5.03.09q5.52.18,10.92.76c2.08.22,4.13.49,6.18.79.23.04.47.07.7.11a146.1978,146.1978,0,0,1,24.89,6.11A148.07731,148.07731,0,0,1,1094.5,302.95666Z"
transform="translate(-105.5 -66.95666)" fill="#b75cf9" />
<ellipse cx="831.02182" cy="309.53203" rx="0.9909" ry="2.64239"
transform="translate(19.41557 779.06517) rotate(-57.656)" fill="#3f3d56" />
<path
d="M861.06081,282.11173h0a4.62419,4.62419,0,0,1,4.62419,4.62419V356.0987a4.62419,4.62419,0,0,1-4.62419,4.62419h0a0,0,0,0,1,0,0V282.11173A0,0,0,0,1,861.06081,282.11173Z"
transform="translate(24.41796 811.92429) rotate(-57.65605)" fill="#d0cde1" />
<path
d="M858.1261,281.548h3.446a3.15995,3.15995,0,0,1,3.15995,3.15995v78.97527a3.74252,3.74252,0,0,1-3.74252,3.74252H858.1261a0,0,0,0,1,0,0V281.548a0,0,0,0,1,0,0Z"
transform="translate(20.92028 811.70879) rotate(-57.656)" fill="#2f2e41" />
<rect x="834.53746" y="305.23373" width="1.3212" height="5.28478"
transform="translate(22.75652 781.82348) rotate(-57.656)" fill="#d0cde1" />
<rect x="840.67664" y="309.12136" width="1.3212" height="5.28478"
transform="translate(22.32676 788.81792) rotate(-57.656)" fill="#d0cde1" />
<circle cx="822.39526" cy="65.5835" r="41.65188" fill="#ffb8b8" />
<path
d="M930.435,162.00124s20.318,32.00083,15.23849,41.14392-20.82593,34.03263-20.82593,34.03263,70.097-51.81086,60.954-62.98576c0,0-20.82594-17.77824-21.84184-28.95313Z"
transform="translate(-105.5 -66.95666)" fill="#ffb8b8" />
<path
d="M986.56,445.47662a148.6943,148.6943,0,0,1-101.75-7.95l3.2-85.5.24-6.65.09-2.16.11-3.18006.08-2.03s.12994-.01.37994-.02c.68006-.05,2.25-.16,4.5-.29,2.61005-.15,6.12006-.34,10.21-.51.97-.04,1.97-.08,3-.13,21.54-.8,55.18-.97,59.63,5.52l.56,3.82.9,6.17,1.84,12.61S990.47,406.77667,986.56,445.47662Z"
transform="translate(-105.5 -66.95666)" fill="#2f2e41" />
<path
d="M1024.91366,226.0029l-35.9832,79.611-15.62454,34.56088-5.79058,12.8156-83.8117-1.0159,8.63515-58.41422c-12.1908-31.49288,16.76234-44.19162,16.76234-44.19162L933.48271,223.387v4.1398s23.87364-28.44518,34.54058-44.69957,25.39749-10.159,25.39749-10.159C1018.81826,170.12843,1024.91366,226.0029,1024.91366,226.0029Z"
transform="translate(-105.5 -66.95666)" fill="#575a89" />
<path
d="M988.93046,305.61385l-15.62454,34.56088c-5.01849-9.3869-8.83828-20.01828-8.83828-26.29653,0-17.27029,17.27029-8.1272,17.27029-8.1272s-13.96861-76.44643-13.96861-99.30416C967.76932,191.26421,980.42738,258.64375,988.93046,305.61385Z"
transform="translate(-105.5 -66.95666)" opacity="0.2" />
<path id="hand"
d="M975.13459,311.33845l-75.68451-1.52385s-55.36652,4.57155-47.23932,26.92134,52.31882,0,52.31882,0l88.38325,13.71464Z"
transform="translate(-105.5 -66.95666)" fill="#ffb8b8" />
<path
d="M989.35718,176.73178s-26.41339,2.0318-26.41339,24.88954S986.81743,305.751,986.81743,305.751s-17.27029-9.14309-17.27029,8.1272,28.95313,67.55731,32.00083,34.03263c0,0,43.68368,21.33389,41.14393-18.79414s-29.969-124.95563-29.969-124.95563S1009.67517,175.20793,989.35718,176.73178Z"
transform="translate(-105.5 -66.95666)" fill="#575a89" />
<path
d="M929.28078,128.00962c-2.91683-2.82275-2.863-7.58359-5.21371-10.89266-3.69137-5.19629-11.377-4.848-17.68755-3.95089-4.19465.59629-8.4507,1.20985-12.34338,2.868a12.16245,12.16245,0,0,0-7.14038,8.17679c-.49426,2.047-1.58411-3.761-2.6931-11.2833A36.63872,36.63872,0,0,1,904.2562,74.69407q.12412-.06094.24612-.12023c7.13779-3.46866,14.61541-6.532,22.50457-7.39277s16.30736.69774,22.49481,5.66716c2.82794,2.27124,5.12823,5.187,8.16007,7.1779,5.32693,3.498,12.07256,3.66741,18.40251,4.40485,7.15885.834,14.334,2.58529,20.51428,6.29332s11.30031,9.55788,13.01853,16.55734c2.00427,8.16476-1.26677,17.81644-9.29411,21.35943a9.67368,9.67368,0,0,0-3.62825,2.6623c-6.59174,8.05815,4.04967,12.46717,5.59291,19.48127,1.28773,5.85276-4.34053,11.15179-10.11253,12.76336-10.75008,3.00145-23.26351-2.97712-27.68289-13.22612-1.97978-4.59132-2.43057-9.67021-2.96919-14.64108-.61656-5.69012-15.54071-15.99609-5.46545-8.24383a14.06888,14.06888,0,0,1,4.46909,5.6524c3.06485,7.33709-3.29621,11.50176-6.708,16.74019a18.63452,18.63452,0,0,0-.10533,19.704c-8.84379-4.62073-13.317-16.20281-9.875-25.56852.91493-2.48953,2.30169-4.791,3.13307-7.30963,1.2973-3.93013.15077-11.56763-5.6499-10.01921C937.16122,127.74136,933.6229,132.21168,929.28078,128.00962Z"
transform="translate(-105.5 -66.95666)" fill="#2f2e41" />
<path
d="M401.5,646.95666a147.99371,147.99371,0,0,1-93.82,137.75c-2.17.87-4.38,1.68-6.6,2.43q-3.72006,1.275-7.52,2.34-2.64.73507-5.33,1.38a148.92087,148.92087,0,0,1-81.61-3.48c-2.07-.69-4.12-1.43-6.15-2.2-2.73-1.05-5.43-2.18-8.08-3.39-.2-.07995-.39-.17-.58-.25994-1.04-.48005-2.05-.96-3.08-1.47h-.01q-2.115-1.02-4.18994-2.12-4.77008-2.52-9.33-5.37-2.37-1.47-4.67-3.05a147.93883,147.93883,0,0,1,53-267.52q3.915-.81,7.91-1.4c1.67-.26,3.36-.48,5.05-.67,1.21-.14,2.42-.27,3.65-.37h.01q4.935-.45,9.96-.56c.46-.01.92-.02,1.39-.03.26,0,.52-.01.78,0h.01c.4-.01.8-.01,1.21-.01,1.68,0,3.36.03,5.03.09q5.52.18,10.92.76c2.08.22,4.13.49,6.18.79.23.04.47.07.7.11.68.11,1.37.22,2.05.34,1.44.23005,2.87.5,4.3.79,1.34.27,2.67.55,4,.85a144.1333,144.1333,0,0,1,14.54,4.13,148.40962,148.40962,0,0,1,77.94,61.93q.765,1.215,1.5,2.46c.38.62.74,1.24,1.1,1.87q.195.31494.36.63c.08.12.14.24.21.36.66,1.15,1.3,2.32,1.92,3.49A147.34392,147.34392,0,0,1,401.5,646.95666Z"
transform="translate(-105.5 -66.95666)" fill="#b75cf9" />
<path
d="M333.73778,594.096s34.35406-30.1993,47.11589-9.09078-35.7555,29.65361-38.55839,28.56221S333.73778,594.096,333.73778,594.096Z"
transform="translate(-105.5 -66.95666)" fill="#a0616a" />
<path id="h1"
d="M266.91481,616.49431s40.65436-13.22071,47.58718-18.59085,13.32-9.33884,14.7214-8.79315,10.59146-2.3316,10.59146-2.3316L350.704,616.8416s-43.45725,12.12932-44.54865,14.93222S266.91481,616.49431,266.91481,616.49431Z"
transform="translate(-105.5 -66.95666)" fill="#575a89" />
<path
d="M288.23,790.85662a148.92087,148.92087,0,0,1-81.61-3.48l1.8-17.02,1.67005-15.9,25.05-38.73,8.03-12.41,33.09,12.03,3.37,21.25,5.37,33.89Z"
transform="translate(-105.5 -66.95666)" fill="#2f2e41" />
<path
d="M307.68,784.70666c-2.17.87-4.38,1.68-6.6,2.43q-3.72006,1.275-7.52,2.34-2.64.73507-5.33,1.38a148.92087,148.92087,0,0,1-81.61-3.48c-2.07-.69-4.12-1.43-6.15-2.2a115.18512,115.18512,0,0,1-.54,17.75,209.82217,209.82217,0,0,1-7.54-21.14c-.15-.48-.29-.96-.43-1.43994-.7-2.42-1.32-4.73-1.88-6.9-.64-2.51-1.19-4.84-1.65-6.97-1.83-8.36-2.41-13.53-2.41-13.53l19.55-40.6,3.91.44995,1.62.18,9.8,1.12,14.24,1.63,23.07,2.63,21.42,18.24,19.19,16.35s1.6,5.44,4.11,14.45C304.29,772.23663,305.9,778.10662,307.68,784.70666Z"
transform="translate(-105.5 -66.95666)" fill="#2f2e41" />
<circle cx="167.20057" cy="404.09024" r="34.59063" fill="#a0616a" />
<path
d="M244.43764,472.787l-18.10289,38.7279,50.82472,35.20444s-5.98253-41.92667,5.288-52.54409S244.43764,472.787,244.43764,472.787Z"
transform="translate(-105.5 -66.95666)" fill="#a0616a" />
<path
d="M283.77893,549.91613s-24.063-49.63-43.61427-49.63-70.68521,34.59063-69.18127,42.11033,1.50394,9.02364,1.50394,13.53546-10.52758,4.51183-1.50394,7.51971,10.52759,6.01576,10.52759,6.01576l-7.51971,192.50438s33.08669,12.03152,45.11822,7.5197,24.06305-34.59063,24.06305-34.59063-3.00788,40.60639,9.02364,39.10245,57.14974-4.51182,58.65368-10.52758-9.02365-138.36252-9.02365-138.36252Z"
transform="translate(-105.5 -66.95666)" fill="#575a89" />
<path
d="M199.93,802.92663v.02c-1.54,13.33-6.21,26.84-18.42,29.71-20.74,4.87994-12.78-37.74-9.04-54.01.88-3.79,1.52-6.15,1.52-6.15l1.21.07,14.88.88,9.48.56s.39,2.75.69,7.06c.09,1.25.17,2.63.22,4.11A115.18512,115.18512,0,0,1,199.93,802.92663Z"
transform="translate(-105.5 -66.95666)" fill="#a0616a" />
<path
d="M205.574,537.88461,161.95975,649.1762s-6.01576,12.03153,0,21.05517-3.00788,63.1655,3.00788,75.197,6.01576,33.08669,6.01576,33.08669L205.574,781.523l7.51971-132.34676,39.10245-84.22066S249.1883,530.36491,205.574,537.88461Z"
transform="translate(-105.5 -66.95666)" fill="#575a89" />
<path d="M216.85358,534.12476s-27.07093,7.5197-36.09457,34.59063Z"
transform="translate(-105.5 -66.95666)" opacity="0.1" />
<path
d="M250.03211,486.82805c3.3654-.20081,6.65148.93653,9.99354,1.38023,11.95693,1.58745,24.39578-7.08907,27.03588-18.85845a14.46986,14.46986,0,0,1,1.38279-4.50547c1.84023-3.00451,6.03125-3.57732,9.48613-2.88645s6.72979,2.30784,10.24823,2.49245c5.43254.28505,10.648-3.05944,13.54323-7.66505s3.71494-10.27278,3.3241-15.69873l-2.60432,2.73335a13.22811,13.22811,0,0,1-1.17923-7.18927,8.34252,8.34252,0,0,0-7.90209,2.022c-2.2964.24439-.56324-4.25943-2.2693-5.81588-.7144-.65175-1.80967-.52879-2.77664-.51946-4.88532.0471-8.83729-3.68953-12.687-6.69754a53.912,53.912,0,0,0-22.76987-10.38623c-5.51651-1.076-11.38253-1.24887-16.61414.80532-4.29645,1.687-7.89263,4.75958-11.21978,7.95887-8.19058,7.8758-15.44345,17.12959-18.85091,27.96947a47.08419,47.08419,0,0,0-.2255,27.30236c1.373,4.63411,5.51094,20.5047,11.56877,20.8743C245.12773,500.60827,240.55768,487.39336,250.03211,486.82805Z"
transform="translate(-105.5 -66.95666)" fill="#2f2e41" />
<polygon points="146.99 530.501 111.569 582.452 100.241 703.122 146.99 530.501" opacity="0.1" />
<ellipse cx="392.8054" cy="566.12644" rx="2.64239" ry="0.9909"
transform="translate(-401.68904 490.12049) rotate(-54.49277)" fill="#3f3d56" />
<path id="m2"
d="M365.01037,550.02588h0a4.62418,4.62418,0,0,1,4.62418,4.62418v69.36279a4.62419,4.62419,0,0,1-4.62419,4.62419h0a0,0,0,0,1,0,0V550.02588A0,0,0,0,1,365.01037,550.02588Z"
transform="translate(218.55077 1215.45843) rotate(-144.49272)" fill="#d0cde1" />
<path
d="M366.97713,548.50282h2.86346a3.74252,3.74252,0,0,1,3.74252,3.74252v78.97527a3.15995,3.15995,0,0,1-3.15995,3.15995h-3.446a0,0,0,0,1,0,0V548.50282a0,0,0,0,1,0,0Z"
transform="translate(222.69105 1221.00434) rotate(-144.49277)" fill="#2f2e41" />
<rect x="387.65243" y="563.52483" width="1.3212" height="5.28478"
transform="translate(270.08307 1185.62901) rotate(-144.49277)" fill="#d0cde1" />
<rect x="383.43196" y="569.44013" width="1.3212" height="5.28478"
transform="translate(258.99132 1193.90834) rotate(-144.49277)" fill="#d0cde1" />
<rect x="283" y="445" width="446" height="2" fill="#3f3d56" />
</svg>解决方案
它与元素的起始位置有关。在你的情况下，hand元素。根据您想要的确切动画类型，您可以执行以下操作：
CSS：
@-webkit-keyframes rotate-left {
from {
transform: translate(-105.5px, -66.95666px);
}
to {
transform: translate(-100px, -60px);
}
}
这些值-105.5px, -66.95666px取自svg. 它是元素的起始位置，因此必须是您的第一个值。然后，您可以根据自己的喜好使用结束值。