CSS animated SVG disappears when container gets too small

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...)

.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;
}

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?

Temani Afif · Accepted Answer

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;
}

CSS animated SVG disappears when container gets too small

Answers (1)

Related Questions