Javascript iOS Safari 11上SVG元素上的CSS动画不工作

我有一个简单的SVG，当它进入视口时会产生动画（通过Javascript中添加的类）。这是一个简单的条形图，用来设置两个矩形元素高度的动画

除了iPadSafari11.1.2（可能在下面），它在任何地方都可以正常工作

当我删除动画时，SVG显示良好。通过javascript添加该类，并添加webkit供应商前缀以支持浏览器

<style type="text/css">
    @keyframes draw {
      from {
        height: 0;
      }
      to {
        height: 110px;
      }
    }

    @keyframes drawBig {
      from {
        height: 0;
      }
      to {
        height: 360px;
      }
    }

    @-webkit-keyframes draw {
        from {
            height: 0;
        }
        to {
            height: 110px;
        }
    }

    @-webkit-keyframes drawBig {
      from {
        height: 0;
      }
      to {
        height: 360px;
      }
    }

    .animate-bar {
      animation: draw 1s linear forwards;
      animation-play-state: paused;
      -webkit-animation: draw 1s linear forwards;
      -webkit-animation-play-state: paused;
    }
    .animate-bar.bar-large {
        animation-name: drawBig;
        -webkit-animation-name: drawBig;
    }
    .play .animate-bar {
        animation-play-state: running;
        -webkit-animation-play-state: running;
    }
</style>

<svg id="diagram" viewBox="0 0 290 472" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="svg" stroke="none" stroke-width="1" fill="#000000" fill-rule="evenodd">
        <g id="left">
            <rect class="animate-bar" x="0" y="283" width="132" height="107" rx="3" transform="scale(1,-1) translate(0,-676)">
            </rect>
            <text font-weight="bold">
                <tspan x="47.384" y="263">1129</tspan>
            </text>
        </g>
        <g id="right" transform="translate(152,0)">
            <rect class="animate-bar bar-large" fill="#EEE6E2" x="0" y="33" width="132" height="360" rx="3" transform="scale(1,-1) translate(0,-426)">
            </rect>
            <text font-weight="bold">
                <tspan x="36.56" y="17">4000</tspan>
            </text>
        </g>
    </g>
</svg>

@关键帧绘制{
从{
身高：0；
}
到{
高度：110px；
}
}
@关键帧变大{
从{
身高：0；
}
到{
高度：360px；
}
}
@-webkit关键帧绘制{
从{
身高：0；
}
到{
高度：110px；
}
}
@-webkit关键帧drawBig{
从{
身高：0；
}
到{
高度：360px；
}
}
.为工具栏设置动画{
动画：向前画1s直线；
动画播放状态：暂停；
-webkit动画：向前画1s线性；
-webkit动画播放状态：暂停；
}
.动画-条。条-大{
动画名称：drawBig；
-webkit动画名称：drawBig；
}
.播放。为工具栏设置动画{
动画播放状态：运行；
-webkit动画播放状态：正在运行；
}
1129
4000

CSS只是操纵动画中条的高度（在添加类之前暂停）

在iOS 11上，虽然这些条从来没有设置动画，所以两个高度都显示为0，而你也看不到

当我在dev工具中查看时，我可以看到DOM中闪烁的

元素表明发生了什么事情（尽管唯一应该操纵它们的是CSS动画），但是它们闪烁得非常快，所以我看不到发生了什么

我不知道还能尝试什么

下面是一些代码：

---

据我所知，除了iOS Safari 11及以下版本外，其他所有版本都适用

尝试设置动画

transform:translateY（110px）代替高度谢谢但不起作用