SVG scale within a div from the center CSS - css

Question

While replacing some .png icons to .svg I'd run onto some problem, consider this:
<div class="container"></div>
.container {
width: 100px;
height: 100px;
background-image: url("some-image.png");
background-size: cover;
transition: 1s;
}
In this case I had applied CSS transition to container and change its size (enlarge). Image inside the container onenlarge scales from center point inline with the container.
But when I changed it to .svg code (bellow) it starts to scaling from the left top corner. Does it possible to make it scale from the center of the container with my current set up (or at all)?
<div class="container"> <svg></svg> </div>
.container {
width: 100px;
height: 100px;
transition: 1s;
}
// I already tried play with transform-origin all the way possible, applying it to the container/svg tag/and all elements inside it...

Answer 1

This is not an answer but I need to add some code. I don't see any difference. Please take a look. First I'm using two elements image.
.container {
position: absolute;
top: 0;
width: 100px;
height: 100px;
border: 1px solid;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png");
background-size: cover;
transition: 1s;
}
.svg {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.svg");
left: 250px;
}
.container:hover {
width: 200px;
height: 200px;
}
<div class="container"></div>
<div class="container svg"></div>
The second attempt: this time I'm using an svg element instead of a background image for the second div. No difference either.
.container {
position: absolute;
top: 0;
width: 100px;
height: 100px;
border: 1px solid;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png");
background-size: cover;
transition: 1s;
overflow:hidden;
}
.svg {
background:black;
left: 250px;
}
.container:hover {
width: 200px;
height: 200px;
}
<div class="container"></div>
<div class="container svg">
<svg viewBox="41 54 106 122">
<g>
<path fill="#FFFFFF" stroke="#ED1D24" stroke-width="2" stroke-miterlimit="10" d="M143.099,93.757c0,0-14.173,8.549-13.724,23.173 c0.449,14.624,11.954,23.413,15.974,24.073c1.569,0.258-9.245,22.049-15.984,27.448c-6.74,5.4-13.714,6.524-24.513,2.25c-10.8-4.275-18.449,0.275-24.749,2.612c-6.299,2.337-13.949-0.137-24.298-14.987c-10.349-14.849-21.823-49.271-6.074-66.146c15.749-16.874,33.298-10.124,38.022-7.875c4.725,2.25,13.05,2.025,22.499-2.25C119.7,77.782,138.374,86.782,143.099,93.757z"/>
</g>
<g>
<path fill="#FFFFFF" stroke="#ED1D24" stroke-width="2" stroke-miterlimit="10" d="M118.575,54.609c0,0,0.9,5.625-1.35,10.349
s-10.718,20.936-22.994,17.999c-0.308-0.073-2.102-5.506,0.532-11.027C98.48,64.138,108.171,55.399,118.575,54.609z"/>
</g>
</svg>
</div><div class="container"></div>
<div class="container svg">
<svg viewBox="41 54 106 122">
<g>
<path fill="#FFFFFF" stroke="#ED1D24" stroke-width="2" stroke-miterlimit="10" d="M143.099,93.757c0,0-14.173,8.549-13.724,23.173 c0.449,14.624,11.954,23.413,15.974,24.073c1.569,0.258-9.245,22.049-15.984,27.448c-6.74,5.4-13.714,6.524-24.513,2.25c-10.8-4.275-18.449,0.275-24.749,2.612c-6.299,2.337-13.949-0.137-24.298-14.987c-10.349-14.849-21.823-49.271-6.074-66.146c15.749-16.874,33.298-10.124,38.022-7.875c4.725,2.25,13.05,2.025,22.499-2.25C119.7,77.782,138.374,86.782,143.099,93.757z"/>
</g>
<g>
<path fill="#FFFFFF" stroke="#ED1D24" stroke-width="2" stroke-miterlimit="10" d="M118.575,54.609c0,0,0.9,5.625-1.35,10.349
s-10.718,20.936-22.994,17.999c-0.308-0.073-2.102-5.506,0.532-11.027C98.48,64.138,108.171,55.399,118.575,54.609z"/>
</g>
</svg>
</div>
Maybe you should edit your question and add more detail

Answer 2

I found the problem as well as the solution
All seems fine when animating only height and width, but some of my icons have top and left properties to animate to. And these ones are cousins the problem.
In my case it was looked like the svg is constantly "jumps" to the upper left corner while its container was resizing, but actually it was just snapping to the whole pixel value.
Animation of top/left properties are not subpixel, so in order to animate it smoothly it is better to animate X and Y, instead of manipulating them directly.
When I did so, the problem was gone.

Answer 3

Try to use the CSS attribute transform-origin see here
div {
transform-origin: 50% 50%;
}
transform-origin: 50% 50%; should center it.