I'm trying to add animation on some groups inside my svg, but after i add the animation my svg changes position. When i try to change it with position absolute tho it doesnt change.
In this code, I add the aimation to the group with the light class. I removed the rest of the code of the svg file so its more simple to show here.
My code:
.svg-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
background-color: white;
}
.svg {
padding-top: 40px;
}
.light {
-webkit-animation: action 1s infinite;
animation: action 1s infinite alternate;
}
@-webkit-keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
@keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}<div >
<div >
<svg xmlns="http://www.w3.org/2000/svg" width="767.74" height="782.925">
<defs>
<linearGradient
id="a"
x1=".771"
y1=".879"
x2=".349"
y2=".103"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#ad81ff" />
<stop offset="1" stop-color="#ffe2ff" stop-opacity=".831" />
</linearGradient>
<linearGradient
id="b"
x1=".73"
y1=".875"
x2="-.036"
y2="-.615"
gradientUnits="objectBoundingBox"
>
<stop offset=".01" />
<stop offset=".13" stop-opacity=".69" />
<stop offset=".25" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<linearGradient
id="c"
x1=".496"
y1="-1.57"
x2=".509"
y2="4.41"
gradientUnits="objectBoundingBox"
>
<stop offset=".01" />
<stop offset=".08" stop-opacity=".69" />
<stop offset=".21" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
<path
data-name="Rectangle 3243"
fill="none"
opacity=".25"
d="M0 0h767.74v782.925H0z"
/>
<rect
data-name="Rectangle 3237"
width="383.786"
height="416.279"
rx="26"
transform="translate(214.352 98.244)"
fill="url(#a)"
/>
<g
data-name="Group 1182"
transform="rotate(36 263.423 810.556)"
>
<path
data-name="Path 6006"
d="M58.972 24.627a24.534 24.534 0 0 1 1.64 16.443 27.256 27.256 0 0 0 .037 14.644c.441 1.455 1.049 2.858 1.624 4.394l-18.81 10.86c-.69-.871-1.333-1.77-2.059-2.6a25.313 25.313 0 0 0-11.728-7.54 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332a25.956 25.956 0 0 1 1.66-1.241 25.9 25.9 0 0 1 38.308 10.53Z"
fill="#afb9c5"
/>
<path
data-name="Path 6007"
d="M55.293 26.751a24.535 24.535 0 0 1 1.641 16.442 27.256 27.256 0 0 0 .036 14.644c.442 1.456 1.049 2.859 1.624 4.395l-15.13 8.736c-.692-.871-1.334-1.77-2.06-2.601a25.313 25.313 0 0 0-11.728-7.539 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332c.545-.438 1.098-.86 1.66-1.242a25.651 25.651 0 0 1 6.154-2.017A25.934 25.934 0 0 1 55.293 26.75Z"
fill="#e4e8ec"
/>
<circle
data-name="Ellipse 627"
cx="2.861"
cy="2.861"
transform="rotate(-30 137.783 -57.321)"
fill="#afb9c5"
r="2.861"
/>
<path
data-name="Rectangle 2622"
fill="#afb9c5"
d="m32.468 31.618 1.12-.646 16.474 28.534-1.12.647z"
/>
<path
data-name="Path 6029"
d="m31.023 33.105 4.85-2.8-5.21-3.245Z"
fill="#afb9c5"
/>
<path
data-name="Path 6030"
d="m40.69 38.934-2.314 1.336-.675-1.168 2.315-1.337a2.6 2.6 0 0 0 .952-3.551l-1.04-1.802 1.166-.674 1.042 1.804a3.947 3.947 0 0 1-1.445 5.392Z"
fill="#afb9c5"
/>
<path
data-name="Rectangle 2623"
fill="#afb9c5"
d="m37.35 30.887 3.728-2.152 2.153 3.728-3.729 2.152z"
/>
<path
data-name="Path 6031"
d="m43.612 48.247-1.169.675-1.205-2.087a2 2 0 0 0-2.732-.732 3.947 3.947 0 0 1-5.386-1.446l-2.75-4.763 1.168-.675 2.764 4.788a2.6 2.6 0 0 0 3.552.952 3.344 3.344 0 0 1 4.565 1.223Z"
fill="#afb9c5"
/>
<rect
data-name="Rectangle 2624"
width="4.305"
height="4.305"
rx="2.152"
transform="rotate(150 11.67 25.183)"
fill="#afb9c5"
/>
<rect
data-name="Rectangle 2625"
width="27.208"
height="5.666"
rx="2.833"
transform="rotate(-30 155.273 -41.6)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2626"
width="24.321"
height="5.064"
rx="2.532"
transform="rotate(-30 163.695 -45.766)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2627"
width="21.102"
height="4.392"
rx="2.196"
transform="rotate(-30 170.605 -50.842)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2628"
width="27.208"
height="5.666"
rx="2.833"
transform="rotate(-30 155.273 -41.6)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2629"
width="24.321"
height="5.064"
rx="2.532"
transform="rotate(-30 163.695 -45.766)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2630"
width="21.102"
height="4.392"
rx="2.196"
transform="rotate(-30 170.605 -50.842)"
fill="#ced6dc"
/>
</g>
</svg>
</div>
</div>CodePudding user response：
Problem in you case is that the g.light element already has a transform property: transform="rotate(36 263.423 810.556)". So the action animation is overwriting the default one that place the bulb icon in the top left.
My recommendation would be to separate the square and bulb in 2 different svg
and align them together by using absolute positioning:
.svg-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
background-color: white;
}
.svg {
position: relative;
padding-top: 40px;
}
.light {
position: absolute;
top: 7%;
right: 30%;
animation: action 1s infinite alternate;
}
@-webkit-keyframes action {
0% {
transform: translateY(0) rotate(40deg);
}
100% {
transform: translateY(-10px) rotate(40deg);
}
}
@keyframes action {
0% {
transform: translateY(0) rotate(40deg);
}
100% {
transform: translateY(-10px) rotate(40deg);
}
}<div >
<div >
<svg xmlns="http://www.w3.org/2000/svg" width="767.74" height="782.925">
<defs>
<linearGradient id="a" x1=".771" y1=".879" x2=".349" y2=".103" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ad81ff" />
<stop offset="1" stop-color="#ffe2ff" stop-opacity=".831" />
</linearGradient>
<linearGradient id="b" x1=".73" y1=".875" x2="-.036" y2="-.615" gradientUnits="objectBoundingBox">
<stop offset=".01" />
<stop offset=".13" stop-opacity=".69" />
<stop offset=".25" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<linearGradient id="c" x1=".496" y1="-1.57" x2=".509" y2="4.41" gradientUnits="objectBoundingBox">
<stop offset=".01" />
<stop offset=".08" stop-opacity=".69" />
<stop offset=".21" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
<path data-name="Rectangle 3243" fill="none" opacity=".25" d="M0 0h767.74v782.925H0z" />
<rect data-name="Rectangle 3237" width="383.786" height="416.279" rx="26" transform="translate(214.352 98.244)" fill="url(#a)" />
</svg>
<svg width="70" heigth="73">
<g data-name="Group 1182">
<path data-name="Path 6006" d="M58.972 24.627a24.534 24.534 0 0 1 1.64 16.443 27.256 27.256 0 0 0 .037 14.644c.441 1.455 1.049 2.858 1.624 4.394l-18.81 10.86c-.69-.871-1.333-1.77-2.059-2.6a25.313 25.313 0 0 0-11.728-7.54 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332a25.956 25.956 0 0 1 1.66-1.241 25.9 25.9 0 0 1 38.308 10.53Z" fill="#afb9c5" />
<path data-name="Path 6007" d="M55.293 26.751a24.535 24.535 0 0 1 1.641 16.442 27.256 27.256 0 0 0 .036 14.644c.442 1.456 1.049 2.859 1.624 4.395l-15.13 8.736c-.692-.871-1.334-1.77-2.06-2.601a25.313 25.313 0 0 0-11.728-7.539 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332c.545-.438 1.098-.86 1.66-1.242a25.651 25.651 0 0 1 6.154-2.017A25.934 25.934 0 0 1 55.293 26.75Z" fill="#e4e8ec" />
<circle data-name="Ellipse 627" cx="2.861" cy="2.861" transform="rotate(-30 137.783 -57.321)" fill="#afb9c5" r="2.861" />
<path data-name="Rectangle 2622" fill="#afb9c5" d="m32.468 31.618 1.12-.646 16.474 28.534-1.12.647z" />
<path data-name="Path 6029" d="m31.023 33.105 4.85-2.8-5.21-3.245Z" fill="#afb9c5" />
<path data-name="Path 6030" d="m40.69 38.934-2.314 1.336-.675-1.168 2.315-1.337a2.6 2.6 0 0 0 .952-3.551l-1.04-1.802 1.166-.674 1.042 1.804a3.947 3.947 0 0 1-1.445 5.392Z" fill="#afb9c5" />
<path data-name="Rectangle 2623" fill="#afb9c5" d="m37.35 30.887 3.728-2.152 2.153 3.728-3.729 2.152z" />
<path data-name="Path 6031" d="m43.612 48.247-1.169.675-1.205-2.087a2 2 0 0 0-2.732-.732 3.947 3.947 0 0 1-5.386-1.446l-2.75-4.763 1.168-.675 2.764 4.788a2.6 2.6 0 0 0 3.552.952 3.344 3.344 0 0 1 4.565 1.223Z" fill="#afb9c5" />
<rect data-name="Rectangle 2624" width="4.305" height="4.305" rx="2.152" transform="rotate(150 11.67 25.183)" fill="#afb9c5" />
<rect data-name="Rectangle 2625" width="27.208" height="5.666" rx="2.833" transform="rotate(-30 155.273 -41.6)" fill="#ced6dc" />
<rect data-name="Rectangle 2626" width="24.321" height="5.064" rx="2.532" transform="rotate(-30 163.695 -45.766)" fill="#ced6dc" />
<rect data-name="Rectangle 2627" width="21.102" height="4.392" rx="2.196" transform="rotate(-30 170.605 -50.842)" fill="#ced6dc" />
<rect data-name="Rectangle 2628" width="27.208" height="5.666" rx="2.833" transform="rotate(-30 155.273 -41.6)" fill="#ced6dc" />
<rect data-name="Rectangle 2629" width="24.321" height="5.064" rx="2.532" transform="rotate(-30 163.695 -45.766)" fill="#ced6dc" />
<rect data-name="Rectangle 2630" width="21.102" height="4.392" rx="2.196" transform="rotate(-30 170.605 -50.842)" fill="#ced6dc" />
</g>
</svg>
</div>
</div>