CSS animated SVG disappears when container gets too small - html

Question

I have create a CSS animation. For the most part, it works as expected.
You can find and test it here: (The weird colors are only for testing...)
https://jsfiddle.net/ec3j8k0r/5/
.svgContainer
{
position: relative;
/*display: inline-block;*/
height: 150px;
width: 150px;
background-color: red;
color: white;
}
.svgCircleBig
{
position:absolute;
/*display: inline-block;*/
height: 100%;
width: 100%;
background-color: transparent;
}
.svgCircleMedium
{
/*display: inline-block;*/
position: absolute;
height: 60%;
width: 60%;
top: 20%;
left: 20%;
background-color: forestgreen;
}
.svgCircleSmall
{
/*display: inline-block;*/
position: absolute;
height: 60%;
width: 60%;
top: 20%;
left: 20%;
background-color: blue;
}
.svgColor
{
fill: white;
stroke: white;
stroke-miterlimit: 1;
}
#-webkit-keyframes rotateRightKeyFrames
{
from
{
-webkit-transform: rotate(0deg);
}
to
{
-webkit-transform: rotate(360deg);
}
}
.rotateRight
{
-webkit-animation: rotateRightKeyFrames 3s linear infinite;
}
.rotateRightFast
{
-webkit-animation: rotateRightKeyFrames 4s linear infinite;
}
#-webkit-keyframes rotateLeftKeyFrames
{
from
{
-webkit-transform: rotate(360deg);
}
to
{
-webkit-transform: rotate(0deg);
}
}
.rotateLeft
{
-webkit-animation: rotateLeftKeyFrames 2s linear infinite;
}
<div class="svgContainer">
<div class="svgCircleBig">
<svg class="rotateRight" viewBox="0 0 90 90">
<use xlink:href="#gear" />
</svg>
<div class="svgCircleMedium">
<svg class="rotateLeft" viewBox="0 0 90 90">
<use xlink:href="#gear" />
</svg>
<div class="svgCircleSmall">
<svg class="rotateRightFast" viewBox="0 0 90 90">
<use xlink:href="#gear"/>
</svg>
</div>
</div>
</div>
</div>
<div style="visibility:collapse; display:none;">
<svg viewBox="0 0 90 90">
<g id="gear"><path class="svgColor" d="M90,46.6v-4l-6.2-2.4c-.2-1.6-.5-3.2-.8-4.7l5-4.4a23.49,23.49,0,0,0-1.4-3.7l-6.7-.2a33.76,33.76,0,0,0-2.4-4.1l3.2-5.8a36.12,36.12,0,0,0-2.5-3l-6.3,2.1c-1.2-1.1-2.4-2.1-3.7-3.1l1-6.6a37.91,37.91,0,0,0-3.4-2L60.6,8.9a40.38,40.38,0,0,0-4.5-1.6L54.8.8C53.5.5,52.2.3,50.9.1L47.4,5.8A9.74,9.74,0,0,0,45,5.6a19.27,19.27,0,0,0-2.4.1L39.1,0c-1.3.2-2.6.4-3.9.7L33.9,7.2c-1.5.5-3,1-4.5,1.6L24.2,4.6a37.91,37.91,0,0,0-3.4,2l1,6.6c-1.3,1-2.5,2-3.7,3.1l-6.3-2.1c-.9,1-1.7,2-2.5,3L12.5,23a33.76,33.76,0,0,0-2.4,4.1l-6.7.2c-.5,1.2-1,2.4-1.4,3.7l5,4.4a35.45,35.45,0,0,0-.8,4.7L0,42.6v4L6.2,49c.2,1.6.5,3.2.8,4.7L2,58.1a23.49,23.49,0,0,0,1.4,3.7l6.7.2a33.76,33.76,0,0,0,2.4,4.1L9.3,71.9a36.12,36.12,0,0,0,2.5,3l6.3-2.1c1.2,1.1,2.4,2.1,3.7,3.1l-1,6.6a37.91,37.91,0,0,0,3.4,2l5.2-4.2a40.38,40.38,0,0,0,4.5,1.6l1.3,6.5c1.3.3,2.6.5,3.9.7l3.5-5.7c.8,0,1.6.1,2.4.1a19.27,19.27,0,0,0,2.4-.1l3.5,5.7c1.3-.2,2.6-.4,3.9-.7l1.3-6.5c1.5-.5,3-1,4.5-1.6l5.2,4.2a37.91,37.91,0,0,0,3.4-2l-1-6.6c1.3-1,2.5-2,3.7-3.1l6.3,2.1c.9-1,1.7-2,2.5-3l-3.2-5.8A33.76,33.76,0,0,0,79.9,62l6.7-.2c.5-1.2,1-2.4,1.4-3.7l-5-4.4a35.45,35.45,0,0,0,.8-4.7ZM45,78.7A34.1,34.1,0,1,1,79.1,44.6,34.14,34.14,0,0,1,45,78.7Z" /></g>
</svg>
</div>
My problem: If the svgContainer class gets too small, let's say only 30px, the most inner animation, with the blue background, disappears to the bottom.
.svgContainer
{
position: relative;
/*display: inline-block;*/
height: 30px;
width: 30px;
background-color: red;
color: white;
}
You can see it live, when changing the CSS code in the fiddle.
My question: Can somebody see what the problem is?

Answer 1

Add display:block to all your SVG elements:
svg {
display:block;
}
.svgContainer {
position: relative;
height: 30px;
width: 30px;
background-color: red;
color: white;
}
.svgCircleBig {
position: absolute;
height: 100%;
width: 100%;
background-color: transparent;
}
.svgCircleMedium {
position: absolute;
height: 60%;
width: 60%;
top: 20%;
left: 20%;
background-color: forestgreen;
}
.svgCircleSmall {
position: absolute;
height: 60%;
width: 60%;
top: 20%;
left: 20%;
background-color: blue;
}
.svgColor {
fill: white;
stroke: white;
stroke-miterlimit: 1;
}
#-webkit-keyframes rotateRightKeyFrames {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.rotateRight {
-webkit-animation: rotateRightKeyFrames 3s linear infinite;
}
.rotateRightFast {
-webkit-animation: rotateRightKeyFrames 4s linear infinite;
}
#-webkit-keyframes rotateLeftKeyFrames {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
.rotateLeft {
-webkit-animation: rotateLeftKeyFrames 2s linear infinite;
}
<div class="svgContainer">
<div class="svgCircleBig">
<svg class="rotateRight" viewBox="0 0 90 90">
<use xlink:href="#gear" />
</svg>
<div class="svgCircleMedium">
<svg class="rotateLeft" viewBox="0 0 90 90">
<use xlink:href="#gear" />
</svg>
<div class="svgCircleSmall">
<svg class="rotateRightFast" viewBox="0 0 90 90">
<use xlink:href="#gear"/>
</svg>
</div>
</div>
</div>
</div>
<div style="visibility:collapse; display:none;">
<svg viewBox="0 0 90 90">
<g id="gear"><path class="svgColor" d="M90,46.6v-4l-6.2-2.4c-.2-1.6-.5-3.2-.8-4.7l5-4.4a23.49,23.49,0,0,0-1.4-3.7l-6.7-.2a33.76,33.76,0,0,0-2.4-4.1l3.2-5.8a36.12,36.12,0,0,0-2.5-3l-6.3,2.1c-1.2-1.1-2.4-2.1-3.7-3.1l1-6.6a37.91,37.91,0,0,0-3.4-2L60.6,8.9a40.38,40.38,0,0,0-4.5-1.6L54.8.8C53.5.5,52.2.3,50.9.1L47.4,5.8A9.74,9.74,0,0,0,45,5.6a19.27,19.27,0,0,0-2.4.1L39.1,0c-1.3.2-2.6.4-3.9.7L33.9,7.2c-1.5.5-3,1-4.5,1.6L24.2,4.6a37.91,37.91,0,0,0-3.4,2l1,6.6c-1.3,1-2.5,2-3.7,3.1l-6.3-2.1c-.9,1-1.7,2-2.5,3L12.5,23a33.76,33.76,0,0,0-2.4,4.1l-6.7.2c-.5,1.2-1,2.4-1.4,3.7l5,4.4a35.45,35.45,0,0,0-.8,4.7L0,42.6v4L6.2,49c.2,1.6.5,3.2.8,4.7L2,58.1a23.49,23.49,0,0,0,1.4,3.7l6.7.2a33.76,33.76,0,0,0,2.4,4.1L9.3,71.9a36.12,36.12,0,0,0,2.5,3l6.3-2.1c1.2,1.1,2.4,2.1,3.7,3.1l-1,6.6a37.91,37.91,0,0,0,3.4,2l5.2-4.2a40.38,40.38,0,0,0,4.5,1.6l1.3,6.5c1.3.3,2.6.5,3.9.7l3.5-5.7c.8,0,1.6.1,2.4.1a19.27,19.27,0,0,0,2.4-.1l3.5,5.7c1.3-.2,2.6-.4,3.9-.7l1.3-6.5c1.5-.5,3-1,4.5-1.6l5.2,4.2a37.91,37.91,0,0,0,3.4-2l-1-6.6c1.3-1,2.5-2,3.7-3.1l6.3,2.1c.9-1,1.7-2,2.5-3l-3.2-5.8A33.76,33.76,0,0,0,79.9,62l6.7-.2c.5-1.2,1-2.4,1.4-3.7l-5-4.4a35.45,35.45,0,0,0,.8-4.7ZM45,78.7A34.1,34.1,0,1,1,79.1,44.6,34.14,34.14,0,0,1,45,78.7Z" /></g>
</svg>
</div>