css - SVG元素在添加动画后改变他的位置

Question

我正在尝试将动画添加到 svg 图片中的元素之一。动画只是使用旋转属性移动元素。元素按照我的意愿进行动画处理，但是在我应用动画后他正在改变他的位置。这对我来说是一件新鲜事，所以我想知道我的问题在哪里。

这是我在 html 文件中的 svg 代码：

#main__light-green {
	animation: lightGreen 3s infinite;
	transform-origin: bottom;
	transform-box: fill-box;
}

@keyframes lightGreen {
	from {
		transform: rotate(20deg);
	}
	to {
		transform: rotate(50deg);
	}
}

<div className='main__hero-img-block'>
                        <svg className='main__hero-img' xmlns="http://www.w3.org/2000/svg" width="680.612" height="399.038" viewBox="0 0 680.612 399.038">
                            <g id="main__hero-img" transform="translate(0 -16.476)">
                                <path id="main__light-green" data-name="Path 1" d="M237.327,663.211c5.573,20.6,24.663,33.361,24.663,33.361s10.053-20.643,4.48-41.245-24.663-33.361-24.663-33.361S231.754,642.61,237.327,663.211Z" transform="translate(-132.418 -302.314)" fill="#4caf50"/>
                                <path id="main__dark-green" d="M230.3,669.885c15.293,14.887,17.161,37.772,17.161,37.772s-22.927-1.252-38.219-16.139-17.161-37.772-17.161-37.772S215.006,655,230.3,669.885Z" transform="translate(-117.199 -313.415)" fill="#388e3c"/>
                                <g id="Group_3" data-name="Group 3">
                                    <rect id="Rectangle_1" data-name="Rectangle 1" width="538.506" height="1.662" transform="translate(73.835 413.852)" fill="#bdbdbd"/>
                                    <path id="Path_3" data-name="Path 3" d="M276.133,756.415H254.526V734.808h21.607Zm-19.945-1.662h18.283V736.47H256.188Z" transform="translate(-139.013 -341.732)" fill="#bdbdbd"/>
                                    <rect id="Rectangle_2" data-name="Rectangle 2" width="183.115" height="183.115" transform="translate(0 16.476)" fill="#3f3d56"/>
                                    <path id="Path_4" data-name="Path 4" d="M329.716,201.588v4.2a19,19,0,0,1-6.53-7.4c-2.438-4.986-2.361-10.733-2.283-16.293.088-6.608.176-12.84-4.015-16.9-4.611-4.457-11.991-3.828-19.128-3.221-.838.066-1.677.143-2.5.21-7.159.541-15.135-1.269-19.006-6.155h4.831c3.541,2.383,8.957,3.221,13.932,2.846.805-.055,1.633-.132,2.46-.2,7.512-.64,16.028-1.368,21.709,4.137,5.229,5.052,5.129,12.311,5.03,19.326-.077,5.174-.143,10.513,1.953,14.793A15.129,15.129,0,0,0,329.716,201.588Z" transform="translate(-146.601 -139.554)" fill="#c8e6c9"/>
                                    <path id="Path_5" data-name="Path 5" d="M304.173,230.655v4.92a20.922,20.922,0,0,0-2.692-2.9c-5.692-5.019-13.866-6.122-21.764-7.2-1.026-.132-2.03-.276-3.034-.419-12.807-1.842-20.749-6.244-24.268-13.425-2.438-4.986-2.361-10.733-2.283-16.293.088-6.608.176-12.84-4.015-16.9-4.611-4.457-11.991-3.828-19.128-3.221-.838.066-1.677.143-2.5.21-9.2.695-19.757-2.493-21.2-11.108a14.768,14.768,0,0,1,1.335-8.284h3.618c-1.213,2.625-2.118,5.163-1.688,7.733,1.092,6.574,9.939,8.935,17.694,8.35.805-.055,1.633-.132,2.46-.2,7.512-.64,16.028-1.368,21.709,4.137,5.229,5.052,5.129,12.311,5.03,19.326-.077,5.174-.143,10.513,1.952,14.793,3,6.133,10.115,9.928,21.764,11.6.993.143,2,.287,3,.419,8.384,1.136,17.065,2.316,23.518,8Q303.924,230.407,304.173,230.655Z" transform="translate(-121.058 -139.554)" fill="#388e3c"/>
                                    <path id="Path_6" data-name="Path 6" d="M275.72,313.586v6.8c-3.982-4.236-7.314-10.049-9.862-17.319-.54-1.544-1.059-3.122-1.577-4.7-2.857-8.637-5.813-17.561-12.851-23.264-7.523-6.089-18.3-7.435-28.725-8.737-1.335-.165-2.669-.331-3.993-.507-16.9-2.239-27.368-7.567-32.012-16.282-3.221-6.056-3.122-13.028-3.023-19.768.121-8.008.243-15.576-5.295-20.5-6.078-5.405-15.818-4.644-25.228-3.9-1.114.088-2.217.176-3.3.254-12.145.838-26.077-3.022-27.975-13.469-.938-5.118,1.456-9.652,3.762-14.042a35.74,35.74,0,0,0,3.221-7.369,16.09,16.09,0,0,0-4.015-14.748h5.405a19.435,19.435,0,0,1,2.857,15.7,39.818,39.818,0,0,1-3.541,8.174c-2.107,3.993-4.081,7.766-3.387,11.627,1.456,7.964,13.116,10.832,23.342,10.126,1.07-.077,2.162-.165,3.254-.243,9.906-.783,21.135-1.655,28.636,5.019,6.894,6.122,6.762,14.925,6.63,23.43-.088,6.277-.188,12.752,2.57,17.947,3.96,7.424,13.359,12.035,28.725,14.075,1.3.177,2.625.342,3.949.507,11.075,1.379,22.514,2.8,31.019,9.7,7.975,6.464,11.119,15.94,14.142,25.107.518,1.566,1.037,3.111,1.566,4.644A52.281,52.281,0,0,0,275.72,313.586Z" transform="translate(-92.605 -139.554)" fill="#4caf50"/>
                                    <path id="Path_7" data-name="Path 7" d="M77,244.1c5.03,6.089,15.7,8.339,25.261,7.678,1.081-.077,2.184-.165,3.3-.254,9.409-.739,19.15-1.5,25.228,3.9,5.538,4.92,5.416,12.487,5.295,20.5-.1,6.74-.2,13.712,3.023,19.768,4.644,8.715,15.112,14.042,32.012,16.282,1.324.176,2.658.342,3.993.507,10.424,1.3,21.2,2.647,28.725,8.737,7.038,5.7,9.994,14.627,12.851,23.264.518,1.577,1.037,3.155,1.577,4.7.5,1.423,1.026,2.78,1.577,4.092h4.721c-.827-1.8-1.533-3.6-2.14-5.317-.529-1.533-1.048-3.078-1.566-4.644-3.022-9.167-6.166-18.642-14.142-25.107-8.5-6.894-19.944-8.317-31.019-9.7-1.324-.165-2.647-.331-3.949-.507-15.366-2.041-24.765-6.652-28.725-14.076-2.758-5.2-2.658-11.671-2.57-17.947.132-8.5.265-17.308-6.63-23.43-7.5-6.674-18.731-5.8-28.636-5.019-1.092.077-2.184.165-3.254.243-10.226.706-21.886-2.162-23.342-10.126-.695-3.861,1.28-7.633,3.387-11.627a39.821,39.821,0,0,0,3.541-8.174c2.074-7.876-1.423-16.6-8.516-21.367v5.405A16.138,16.138,0,0,1,81.269,216.9a35.738,35.738,0,0,1-3.221,7.369c-.353.673-.706,1.335-1.048,2.019Z" transform="translate(-77 -153.684)" fill="#388e3c"/>
                                    <path id="Path_8" data-name="Path 8" d="M158,405.767h-4.578c-.243-.717-.474-1.445-.717-2.173-2.857-8.637-5.813-17.561-12.851-23.264-7.523-6.089-18.3-7.435-28.725-8.737-1.335-.165-2.669-.331-3.993-.507C92.223,369.111,82.306,364.721,77,357.727V346.751a20.818,20.818,0,0,0,2.041,6.288c3.96,7.424,13.359,12.035,28.725,14.075,1.3.177,2.625.342,3.949.507,11.075,1.379,22.514,2.8,31.019,9.7,7.975,6.464,11.119,15.94,14.142,25.107C157.25,403.55,157.615,404.664,158,405.767Z" transform="translate(-77 -206.176)" fill="#c8e6c9"/>
                                    <rect id="Rectangle_3" data-name="Rectangle 3" width="183.115" height="183.115" transform="translate(248.197 16.476)" fill="#3f3d56"/>
                                    <path id="Path_9" data-name="Path 9" d="M546.69,169.267a58.469,58.469,0,0,1-88.248,50.312V156.03h86.737A58.111,58.111,0,0,1,546.69,169.267Z" transform="translate(-210.245 -139.554)" fill="#388e3c"/>
                                    <path id="Path_27" data-name="Path 27" d="M35.3,0A35.3,35.3,0,1,1,0,35.3,35.3,35.3,0,0,1,35.3,0Z" transform="translate(348.579 30.817)" fill="#4caf50"/>
                                    <path id="Path_28" data-name="Path 28" d="M25.371,0A25.371,25.371,0,1,1,0,25.371,25.371,25.371,0,0,1,25.371,0Z" transform="translate(279.084 115.756)" fill="#388e3c"/>
                                    <path id="Path_10" data-name="Path 10" d="M719.726,389.68v30h-36.3a25.373,25.373,0,0,1,36.3-30Z" transform="translate(-288.415 -220.093)" fill="#c8e6c9"/>
                                    <circle id="Ellipse_3" data-name="Ellipse 3" cx="6.619" cy="6.619" r="6.619" transform="translate(361.817 133.405)" fill="#00bfa6"/>
                                    <rect id="Rectangle_4" data-name="Rectangle 4" width="183.115" height="183.115" transform="translate(497.498 16.476)" fill="#3f3d56"/>
                                    <path id="Path_11" data-name="Path 11" d="M930.932,156.03v75.011H841.58v4.412h93.764V156.03Z" transform="translate(-344.082 -139.554)" fill="#4caf50"/>
                                    <path id="Path_12" data-name="Path 12" d="M1073.029,395.06l7.58-10.777v-7.667l-12.972,18.444Zm-30.776-78.96-40.605,57.747,30.17,21.213h7.667l-31.692-22.283,35.531-50.533,37.287,26.221v-5.394Z" transform="translate(-399.997 -195.469)" fill="#388e3c"/>
                                    <path id="Path_13" data-name="Path 13" d="M947.69,304.86l-23.4,23.4,23.4,23.4,23.4-23.4Zm-17.164,23.4,17.164-17.164,17.164,17.164L947.69,345.421Z" transform="translate(-372.976 -191.543)" fill="#c8e6c9"/>
                                    <circle id="Ellipse_7" data-name="Ellipse 7" cx="15.79" cy="15.79" r="15.79" transform="translate(313.713 81.856)" fill="#ffb8b8"/>
                                    <path id="Path_14" data-name="Path 14" d="M570.625,290.011s4.155,21.607,2.493,25.762,23.269-1.662,23.269-1.662-4.986-21.607-4.155-26.593S570.625,290.011,570.625,290.011Z" transform="translate(-249.433 -184.886)" fill="#ffb8b8"/>
                                    <path id="Path_15" data-name="Path 15" d="M451.479,276.507l1.662,22.437,8.249,35.238,2.555,9.637,4.155-14.959-4.155-34.072-1.411-15.34Z" transform="translate(-157.71 -96.589)" fill="#ffb8b8"/>
                                    <path id="Path_16" data-name="Path 16" d="M655,402.106v23.269s-2.493,29.917-7.479,37.4-6.648-29.917-6.648-29.917l3.907-27.424Z" transform="translate(-273.97 -225.513)" fill="#ffb8b8"/>
                                    <path id="Path_17" data-name="Path 17" d="M547.775,511.714s-4.155,4.986-.831,55.679-1.662,87.258,9.141,87.258c0,0-3.324,10.8,5.817,11.634s13.3,1.662,14.128-.831,2.493-14.127,0-14.127c0,0,0,3.324,1.662-9.972s1.662-76.454,5.817-84.765l13.3,30.748s0,14.127,2.493,20.776,6.648,44.876,6.648,44.876l-.831,5.817s19.945,3.324,20.776,0,.831-8.31,0-9.972-.831-1.662.831-4.986,1.662-5.817.831-8.31-.831-56.51-.831-56.51-1.662-65.651-11.634-68.975S547.775,511.714,547.775,511.714Z" transform="translate(-240.71 -262.821)" fill="#2f2e41"/>
                                    <path id="Path_18" data-name="Path 18" d="M557.338,740.556,550.69,752.19s-10.388-3.74-8.31,5.817a166.062,166.062,0,0,0,30.333-.416s4.155,1.662,4.986-.831-2.078-11.219-4.571-11.219S557.338,740.556,557.338,740.556Z" transform="translate(-239.47 -343.74)" fill="#2f2e41"/>
                                    <path id="Path_19" data-name="Path 19" d="M637.061,733.788s-6.648,14.958-4.155,15.79,24.931,4.155,26.593,4.986,9.972,1.662,10.8-3.324-4.155-6.648-4.155-6.648-9.141-1.662-11.634-9.972S637.061,733.788,637.061,733.788Z" transform="translate(-270.993 -340.296)" fill="#2f2e41"/>
                                    <path id="Path_20" data-name="Path 20" d="M584.219,324.485s-22.438-4.155-27.424,0-25.762,12.466-25.762,16.621,10.8,44.876,10.8,44.876-5.817,61.5,0,63.158,15.79-3.324,27.424,2.493,44.875-4.986,44.875-4.986-12.465-53.186-9.141-63.158,5.817-44.045,5.817-44.045S596.684,324.485,584.219,324.485Z" transform="translate(-235.602 -197.753)" fill="#8985a8"/>
                                    <path id="Path_21" data-name="Path 21" d="M532.2,347.188l-5.817,1.662s-12.465,39.058-7.479,40.72,19.114,4.986,20.776,4.986S532.2,347.188,532.2,347.188Z" transform="translate(-230.955 -206.329)" fill="#8985a8"/>
                                    <path id="Path_22" data-name="Path 22" d="M633.206,340.8l13.3,4.986s17.452,32.41,13.3,36.565-22.438,8.31-22.438,8.31Z" transform="translate(-271.293 -204.098)" fill="#8985a8"/>
                                    <path id="Path_23" data-name="Path 23" d="M573,250.726a8.924,8.924,0,0,0-3.95.174,10.3,10.3,0,0,0-2.807,1.841,32.85,32.85,0,0,1-4.8,3.18,11.2,11.2,0,0,0-3.734,2.618,7.945,7.945,0,0,0-1.054,2,23.907,23.907,0,0,0-1.257,13.011,5.983,5.983,0,0,0,.554,1.787c.864,1.591,2.771,2.218,4.378,3.053,3.051,1.584,5.364,4.251,7.866,6.608a15.378,15.378,0,0,0,3.108,2.4c3.57,1.946,7.934,1.311,11.941.623a2.152,2.152,0,0,0,2.148-2.173l3.163-14.228a23.213,23.213,0,0,0,.811-6.471c-.221-3.454-2.091-8.238-4.625-10.691C581.791,251.59,576.863,251.135,573,250.726Z" transform="translate(-243.979 -172.583)" fill="#2f2e41"/>
                                    <circle id="Ellipse_8" data-name="Ellipse 8" cx="6.558" cy="6.558" r="6.558" transform="translate(215.526 389.036)" fill="#388e3c"/>
                                    <path id="Path_24" data-name="Path 24" d="M408.139,747.452a18.945,18.945,0,1,1,18.945-18.945A18.945,18.945,0,0,1,408.139,747.452Zm0-36.433a17.488,17.488,0,1,0,17.488,17.488,17.488,17.488,0,0,0-17.488-17.488Z" transform="translate(-186.055 -332.912)" fill="#bdbdbd"/>
                                    <circle id="Ellipse_9" data-name="Ellipse 9" cx="6.558" cy="6.558" r="6.558" transform="translate(534.641 389.867)" fill="#388e3c"/>
                                    <path id="Path_25" data-name="Path 25" d="M898.571,748.728a18.945,18.945,0,1,1,18.945-18.945A18.945,18.945,0,0,1,898.571,748.728Zm0-36.433a17.488,17.488,0,1,0,17.488,17.488A17.488,17.488,0,0,0,898.571,712.3Z" transform="translate(-357.372 -333.358)" fill="#bdbdbd"/>
                                    <circle id="Ellipse_10" data-name="Ellipse 10" cx="6.558" cy="6.558" r="6.558" transform="translate(534.641 353.302)" fill="#388e3c"/>
                                    <path id="Path_26" data-name="Path 26" d="M898.571,692.533a18.945,18.945,0,1,1,18.945-18.945A18.945,18.945,0,0,1,898.571,692.533Zm0-36.433a17.488,17.488,0,1,0,17.488,17.488A17.488,17.488,0,0,0,898.571,656.1Z" transform="translate(-357.372 -313.728)" fill="#bdbdbd"/>
                                </g>
                            </g>
                        </svg>
                    </div>

标签： csssvgcss-animations

Answer 1

您将需要计算该transform origin点的位置。应用于路径的转换会使这复杂化。所以我选择删除转换并重新计算 d 属性的值。

观察：我添加了一个小红点来可视化旋转中心的位置。您可以删除该点。

#main__light-green {
	animation: lightGreen 3s infinite;
	transform-origin: 129.572px 394.25px;
}

@keyframes lightGreen {
	from {
		transform: rotate(20deg);
	}
	to {
		transform: rotate(50deg);
	}
}

<div className='main__hero-img-block'>
  <svg className='main__hero-img' xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 680.612 399.038">
    <g id="main__hero-img" transform="translate(0 -16.476)">
      
        <path id="main__light-green" data-name="Path 1" d="M104.909,360.897c5.573,20.6,24.663,33.361,24.663,33.361s10.053,-20.643,4.48,-41.245s-24.663,-33.361,-24.663,-33.361s-10.053,20.644,-4.48,41.245z" fill="#4caf50" />
        <circle fill="red" r="4" cx="129.572" cy="394.25" />
      </g>
   
    
  </svg>

为了重新计算路径的 d 属性值，我使用了Convert SVG path to all-relative or all-absolute来将 d 属性转换为所有相对路径。M237.327,663.211接下来，我根据您应用于路径的转换（237.327-132.418、663.211-302.314）修改了移动到点（路径的第一个点：）的值