Question

在我的firefox更新到版本35.0.1后，我的svg动画在firefox中不起作用，但它在以前的版本中工作，它仍然适用于firefox beta（36），nightly（37.0a2）和其他浏览器（opera ，铬，野生动物园，现代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/

任何想法，为什么？：（

Answer 1

这是由Firefox代码的更改引起的，该代码不完全正确，然后修复了。 Bug 932771导致了它，并且在Firefox 36修复它的情况下向后移植了1127507。

firefox 35.0.1：svg掩码动画不起作用

1 个答案: