Question

我正在努力应对容易的事情，让我解释一下：

我使用了一个使用JavaScript的animateTransform标签的SVG 更改表格attribut
然后我使用beginElement（）

SVG

<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <defs>
        <path id="right" fill="#F7931E" d="M55.002,30c0-13.808-11.192-25-25-25v6c10.477,0,19,8.523,19,19s-8.523,19-19,19v6 C43.81,55,55.002,43.808,55.002,30z">
            <animateTransform id="rotate" attributeName="transform" type="rotate" from="0 30 30" to="180 30 30" begin="0s"  fill="freeze"/>
        </path>

        <path id="left" fill="#F7931E" d="M11.002,30c0-10.477,8.523-19,19-19V5c-13.808,0-25,11.192-25,25s11.192,25,25,25v-6 C19.526,49,11.002,40.477,11.002,30z">
            <animateTransform  id="rotate2" attributeName="transform" type="rotate" from="0 30 30" to="180 30 30" begin="0s"   fill="freeze"/>
        </path>

        <mask id="hide-left">
            <rect x="0" y="0" width="30" height="60" fill="white"/>
        </mask>

        <mask id="hide-right">
            <rect id="super" x="30" y="0" width="30" height="60" fill="white"/>
        </mask>
    </defs>

    <!-- Layout -->
    <use xlink:href="#right" mask="url(#hide-right)"/>
    <use xlink:href="#left" mask="url(#hide-left)"/>
</svg>

JS

    var updateCircle= function (pourcentage) {

    if (pourcentage < 0.5) {
        var angle = pourcentage * 2;
        var angle_vert = 180 * angle;
        var angle_rouge = 0;
    }
    else {
        var angle_vert = 180;
        var angle = (1 - pourcentage) * 2;
        var angle_rouge = 180 - (180 * angle);
    }
    $("#mod_countdown #right #rotate").attr('from', angle_vert + ' 30 30');
    $("#mod_countdown #left #rotate2").attr('from', angle_rouge + ' 30 30');
    $("#mod_countdown #right #rotate")[0].beginElement();
    $("#mod_countdown #left #rotate2")[0].beginElement();
};

使用的示例：http://jsfiddle.net/oandcf08/2/

我的问题是：它没有在firefox上工作，我也不知道为什么......

[编辑]

有趣的事实：当我添加属性转换：<path transform="scale(5)" ...它在firefox中工作时检查出来：http://jsfiddle.net/oandcf08/3/，它正在工作但我不明白为什么它似乎不是一个可靠的解决方法

使用javascript的SVG动画无法在firefox

0 个答案: