缓慢改变两个SVG，

Question

为什么选择beginElement（）;不在Firefox中工作？
演示https://jsfiddle.net/zpo2n8uf/8/

最初的决定是如此http://jsfiddle.net/zpo2n8uf/3/  但它不是来自快速闪烁点击图标的事实

＆＃13;

＆＃13;

var svgAnim = $('.fox_btn svg animate');

var playObj = {
    from: 'M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26', 
    to: 'M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28',
    dur: '0.2s',
    keySplines: '.4 0 1 1',
    repeatCount: 1
};


var pausObj = {
    from: 'M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28', 
    to: 'M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26',
    dur: '0.2s',
    keySplines: '.4 0 1 1',
    repeatCount: 1
};

$('.fox_btn').on('click', function() {
    if($(this).hasClass('play')) {
        svgAnim.attr(pausObj).get(0).beginElement();
    } else {
        svgAnim.attr(playObj).get(0).beginElement();
    }

    $(this).toggleClass('play');
});

＆＃13;

.fox_btn {
    background: transparent;
    width: 186px;
    height: 186px;
}

body { background: #000; }

.fox-svg-shadow {
  stroke: rgba(0,0,0,.15);
  stroke-width: 2px;
    fill: none;
}

.fox-svg-fill {
  fill: #fff;
  -webkit-transition:  all 325ms ease;
	-moz-transition: all    325ms ease;
	-ms-transition:  all     325ms ease;
	-o-transition:   all      325ms ease;
	transition:      all         325ms ease;
}

.fox_btn:hover .fox-svg-fill {
    fill: #ffbf2c;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fox_btn play">
    <svg width="100%" height="100%" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <path id="fox-play-svg" d="M 11 10 L 18 13.74 L 18 22.28 L 11 26 M 18 13.74 L 26 18 L 26 18 L 18 22.28">        
                <animate attributeType="XML" attributeName="d" fill="freeze"></animate>        
            </path>
        </defs>        
        <use xlink:href="#fox-play-svg" class="fox-svg-shadow"></use>
        <use xlink:href="#fox-play-svg" class="fox-svg-fill"></use>
    </svg>
</div>

＆＃13;

＆＃13;

＆＃13;