firefox 35.0.1：svg 蒙版动画不起作用答案

【问题标题】：firefox 35.0.1: svg mask animation doesn't workfirefox 35.0.1：svg 蒙版动画不起作用
【发布时间】：2015-04-25 20:24:15
【问题描述】：

在我的 firefox 更新到版本 35.0.1 后，我的 svg 动画在 firefox 中不起作用，但它在以前的版本中有效，并且在 firefox beta (36)、nightly (37.0a2) 和其他浏览器 (opera , chrome, safari, 现代 ie):

html:

    <svg version="1.1" id="logo-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="55px" height="53.758px" viewBox="-1061.986 3038.43 55 53.758" enable-background="new -1061.986 3038.43 188.279 53.758" xml:space="preserve">
                        <g id="logo-mask" >
                            <rect id="sygnet" fill="#FFFFFF" x="-1100" y="3038" width="100" height="50"/>
                        </g>
                        <g id="logo-black">
                            <rect id="sygnet" fill="#000000" x="-1100" y="3038" width="100" height="50"/>
                        </g>
                    </svg>
<div id="button">Click me!</div>

css：

    body{
    background-color: #777777;
}

#button{
    margin-right: 100px;
    display: block;
    width: 100px;
    height: 20px;
    float: right;
    background-color: #fff;
    cursor: pointer;
    text-align: center;
    line-height: 20px;
}

js（使用 snap.svg）：

$(document).ready(function(){
    var s = Snap(),
        svg = Snap.select('#logo-svg'),
        logo = Snap.select('#logo-mask'),
        logoBlack = Snap.select('#logo-black'),
        mask = svg.rect(-1100, 2830, 280, 100).attr({
            fill: 'white',
            id: 'maska-logo'
        });
    logoBlack.attr({'mask': mask, 'opacity': 1});
});

$(document).on('click', '#button', function(){
    var maska = Snap.select('#maska-logo');
    maska.animate({
        transform: 'T'+[0,200]
    }, 500);

});

简单示例：http://jsfiddle.net/7yq14L0f/2/

任何想法，为什么？ :(

【问题讨论】：

标签： firefox animation svg mask snap.svg

【解决方案1】：

这是由 Firefox 代码的更改引起的，该更改不完全正确，随后已修复。错误 932771 导致了它，而错误 1127507 被向后移植，直到 Firefox 36 修复了它。

【讨论】：