I am trying to make a svg animation, as the demo shows when I scale the charge fill of svg, it was pushed to the container's left edge.
Is it possible to keep the x,y attributes of the path in the svg? Or is my svg made impossible to animate correctly?
.svg {
width: 40%;
}
#charge {
/* animation: charge 1s ease infinite; */
transform: scaleX(0.1);
}
@keyframes charge {
0% {
transform: scaleX(0.1);
}
100% {
transform: scale(1);
}
}
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
<polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
<rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
</svg>
</div>
To avoid setting pixel value on the transform-origin
you can also adjust the transform-box
to have the transform-origin
relative to the element and not the whole SVG:
.svg {
width: 40%;
}
#charge {
transform-origin: left;
transform-box:fill-box;
animation: charge 1s ease infinite;
transform: scaleX(0.1);
}
@keyframes charge {
0% {
transform: scaleX(0.1);
}
100% {
transform: scale(1);
}
}
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
<polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
<rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
</svg>
</div>
You can use the transform-origin
property allows you to change the position of transforming elements. The default values are 50%, 50%, making your transforms start in the middle of the element.
.svg {
width: 40%;
}
#charge {
transform-origin: 10px;
animation: charge 1s ease infinite;
transform: scaleX(0.1);
}
@keyframes charge {
0% {
transform: scaleX(0.1);
}
100% {
transform: scale(1);
}
}
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
<polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
<rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
</svg>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With