SVG动画在移动设备上中断

如何解决SVG动画在移动设备上中断

我在CodePen上找到了此文件，并希望将其合并到我的网站中，但是我很难弄清为什么它在移动设备上会中断。当我调整浏览器窗口的大小并在Firefox和Chrome上同时使用设备模拟器时，看起来不错，但是在手机或iPad上查看时，它会崩溃。

为什么会这样？

https://codepen.io/Mantish/pen/YyoYNW

svg { max-height: 100%; }
#dodecahedron {
     perspective: 500em;
     transform-style: preserve-3d;
     height: 12.36em;
     margin: 6em;
     position: relative;
     width: 12.36em;
     transform: rotateX(-40deg) rotateY(-5deg) rotateZ(-10deg);
     animation: rot 20s infinite linear;
}
 @keyframes rot {
     from {
         transform: rotateZ(-15deg) rotateX(45deg) rotateY(0deg);
    }
     to {
         transform: rotateZ(345deg) rotateX(-315deg) rotateY(360deg);
    }
}
 .face {
     position: absolute;
     width: 100%;
     height: 100%;
}
 .face:nth-child(1) {
     transform: rotateX(31.72deg) translateZ(8.09em);
}
 .face:nth-child(2) {
     transform: rotateZ(180deg) rotateX(31.72deg) translateZ(8.09em);
}
 .face:nth-child(3) {
     transform: rotateZ(-90deg) rotateX(-58.28deg) translateZ(8.09em);
}
 .face:nth-child(4) {
     transform: rotateZ(90deg) rotateX(-58.28deg) translateZ(8.09em);
}
 .face:nth-child(5) {
     transform: rotateY(90deg) rotateX(-58.28deg) translateZ(8.09em);
}
 .face:nth-child(6) {
     transform: rotateY(-90deg) rotateX(-58.28deg) translateZ(8.09em);
}
 .face:nth-child(7) {
     transform: rotateZ(180deg) rotateY(90deg) rotateX(-58.28deg) translateZ(8.09em);
}
 .face:nth-child(8) {
     transform: rotateZ(180deg) rotateY(-90deg) rotateX(-58.28deg) translateZ(8.09em);
}
 .face:nth-child(9) {
     transform: rotateY(180deg) rotateX(31.72deg) translateZ(8.09em);
}
 .face:nth-child(10) {
     transform: rotateZ(180deg) rotateY(180deg) rotateX(31.72deg) translateZ(8.09em);
}
 .face:nth-child(11) {
     transform: rotateZ(-90deg) rotateY(180deg) rotateX(-58.28deg) translateZ(8.09em);
}
 .face:nth-child(12) {
     transform: rotateZ(90deg) rotateY(180deg) rotateX(-58.28deg) translateZ(8.09em);
}

<svg>
  <defs>
    <clipPath id="72deg">
      <polygon points="0,0 20,20 0,20" transform="rotate(9)"></polygon>
      <polygon points="0,0 -20,20" transform="rotate(-9)"></polygon>
    </clipPath>
    <line id="baseline" x1="-20" y1="10" x2="20" y2="10"></line>
    <g id="pentagon">
      <use id="side" xlink:href="#baseline" clip-path="url(#72deg)"></use>
      <use xlink:href="#side" transform="rotate(144)"></use>
      <use xlink:href="#side" transform="rotate(-144)"></use>
      <use xlink:href="#side" transform="rotate(72)"></use>
      <use xlink:href="#side" transform="rotate(-72)"></use>
    </g>
    <clipPath id="pentacp">
      <use xlink:href="#pentagon" transform="scale(0.04)"></use>
    </clipPath>
  </defs>
</svg>

<div id="dodecahedron">
    <div class="face"><svg viewBox="-12.36,-12.36 24.72,24.72"><use xlink:href="#pentagon" style="stroke: #666; stroke-width: 0.1"></use></svg></div>
    <div class="face"><svg viewBox="-12.36,24.72"><use xlink:href="#pentagon" style="stroke: #666; stroke-width: 0.1"></use></svg></div>
</div>