Css 旋转SVG掩模

我正在努力找到一种方法来旋转这个SVG掩码，使其从中心旋转。换句话说，我的目标是在无限循环中产生旋转效果。另外，我不明白为什么它在Firefox中不会旋转。有什么想法吗

这是我的建议

HTML:

---

对于从中心旋转，添加

变换原点：50%50%

详情如下:

.first-ring-path{
      -moz-animation:spin 20s infinite linear;
        -webkit-animation:spin 20s infinite linear;
        animation:spin 20s infinite linear;
         transform-origin: 50% 50%;
    }

---

假设我刚刚把同样的代码贴到了一个网站上。只有7个衬里，都是基于

编辑：在最新的FF v47上测试（2016年6月）

var myPath=document.getElementById（'pathRotate'）；
var i=0；
var intervalID=window.setInterval（myCallback，30）；
函数myCallback（）{
//稍微旋转正方形。
如果（i==360）{i=0}
setAttribute（“transform”、“rotate（“+i+”，121121）”）；
++一,；
}

正文{
背景色：红色；
}
.家{
背景图片：url（'../images/ontocore_home_background.jpg'）；
背景尺寸：封面；
背景位置：中心；
背景附件：固定；
背景重复：无重复；
}
.主覆盖层{
身高：4000；
背景图像：url（'../images/ontocore_home_overlay.png'）；
背景尺寸：封面；
背景位置：中心；
背景附件：固定；
背景重复：无重复；
}
svg{
宽度：100%；
身高：100%；
溢出：隐藏；
}
svg掩码矩形{
填充：rgba（255，255，255，0.6）；
}
svg>rect{
填充物：白色；
//-webkit掩码：url（#掩码）；
//-moz-mask:url（#mask）；
//掩码：url（#掩码）；
}

<

CSS动画目前不适用于Firefox中的掩码（这是一个已知的bug）。不过，SMIL应该管用。真的管用吗？在Chrome中工作…抱歉，我没有构建跨浏览器软件包。是的，@RobertLongson关于CSS动画在Firefox中不适用于掩码的说法是正确的。您认为有没有一种jQuery替代方案可以更好地支持浏览器？这很可能是通过Javascript实现的。你想试试吗？

html{
    height: 100%;
    overflow:hidden;
    font-weight:100;
}
body {
    height: 100%;
    overflow:hidden;
}    
svg  {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
svg mask rect {
    fill: rgba(255, 255, 255, 0.6);
}
svg > rect {
    fill: white;
    // -webkit-mask: url(#mask);
    // -moz-mask: url(#mask);
    // mask: url(#mask);
}
.first-ring-path{
    -moz-animation:spin 20s infinite linear;
    -webkit-animation:spin 20s infinite linear;
    animation:spin 20s infinite linear;
}  
@-moz-keyframes spin {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(-360deg); }
}

.first-ring-path{
      -moz-animation:spin 20s infinite linear;
        -webkit-animation:spin 20s infinite linear;
        animation:spin 20s infinite linear;
         transform-origin: 50% 50%;
    }