动态加载的 SVG 动画在 Chrome 中工作，但在 Firefox 和 safari 中不工作

Question

我的页面中有一个 SVG 元素，我使用 JQuery 在其中动态加载随机创建的正方形，其中还设置了动画。 这可以完美地在 Chrome 中使用，但我无法在 Firefox 和 Safari 中使用。我还没有在IE中测试过。

在这里您可以测试动画，在 Chrome 中它可以正常工作： http://jsfiddle.net/Koendema/Fe8Jk/15/

有什么想法吗？

HTML：

<header>
    <svg class="svgHeader" style="width:400; height:300; background: #000;">
    </svg>
</header>

JQuery:

animateBg('header', 'svgHeader', 20);  


function animateBg(parentName, svgClass, totalRects){

    //var svgG = $('.' + svgClass + ' g');
    var svgG = $('.' + svgClass);
    var minSize = 10; //min size square
    var maxSize = 85; //max size square
    var widthSvg = $('.' + svgClass).innerWidth();
    var heightSvg =  $('.' + svgClass).innerHeight();

    $('.' + svgClass).attr('height', $(parentName).innerHeight());

    for (i=1;i <= totalRects;i++){

        var randomSize = getRandomRange(minSize, maxSize);
        var randomLeft = getRandomRange(randomSize, widthSvg);//to calculate a random x from position later
        var randomOpacity = (Math.random() * 1).toFixed(1);
        var randomDur = getRandomRange(8, 30); //duration of the animation
        var yFrom = getRandomRange(randomSize, heightSvg);
        var yTo = getRandomRange(randomSize, heightSvg);

        if (i <= (totalRects / 2)) {
            var xFrom = 0 - randomLeft - randomSize;
            var xTo = widthSvg;
        } else {
            var xFrom = widthSvg + randomLeft + randomSize; 
            var xTo = 0 - randomSize;
        }

        $(svg("rect"))
            .attr('id', svgClass + 'Rect' + i)
            .attr('width', randomSize)
            .attr('height', randomSize)
            .attr('x', xFrom)
            .attr('y', yFrom)
            .css({
                opacity:randomOpacity,
                fill:'#ab2469',
                stroke:'#ab2469'
            })
            .html(
                '<animate ' +
                'attributeName="x"' +
                'attributeType="XML"' +
                'from="' + xFrom + '"' +
                'to="'+ xTo + '" ' +
                'begin="0s" dur="' + randomDur + 's" ' +
                'repeatCount="indefinite" ' +
                 '/>' +
                '<animate attributeName="y" ' +
                'attributeType="XML" ' +
                'from="' + yFrom + '"' + 
                'to="' + yTo + '" ' +
                'begin="0s" dur="' + randomDur + 's" ' +
                'repeatCount="indefinite" ' +
                '/>'
            )
            .appendTo(svgG);
    }
}

function svg(tag)
{
   return document.createElementNS('http://www.w3.org/2000/svg', tag);
}

function getRandomRange(min, max){
    return Math.floor((Math.random() * (max - min) + min));
}

我终于得到了它的工作，通过使用命名空间以及动画。 我还必须用 Javascript 替换一些 JQuery：

http://jsfiddle.net/Koendema/7nURy/7/

Answer 1

您的 <animate> 元素的命名空间有误。它们将作为 FF 中的 xhtml 命名空间出现，而不是 SVG 命名空间。从 Firebug 中的 DOM 选项卡：

localName       "animate"
namespaceURI    "http://www.w3.org/1999/xhtml"

您需要像创建 <rect> 元素一样创建它们。

Answer 2

我终于得到了它的工作，通过使用命名空间以及动画。我还必须用 Javascript 替换一些 JQuery：

http://jsfiddle.net/Koendema/7nURy/7/

function animateBg(parentName, svgId, totalRects){

//var svgG = $('.' + svgClass + ' g');
var svgG = $('#' + svgId);
var minSize = 10; //min grootte vierkant
var maxSize = 85; //max grootte vierkant

$('#' + svgId).css('height', $(parentName).innerHeight());
var widthSvg = $('#' + svgId).innerWidth();
var heightSvg =  $('#' + svgId).innerHeight();

$('#' + svgId).css('height', $(parentName).innerHeight());

for (i=1;i <= totalRects;i++){

    var randomSize = getRandomRange(minSize, maxSize);
    var randomLeft = getRandomRange(randomSize, widthSvg);//om later een random x from positie te berekenen
    var randomOpacity = (Math.random() * 1).toFixed(1);
    var randomDur = getRandomRange(8, 30); //duration van de animatie
    var yFrom = getRandomRange(randomSize, heightSvg);
    var yTo = getRandomRange(randomSize, heightSvg);

    if (i <= (totalRects / 2)) {
        var xFrom = 0 - randomLeft - randomSize;
        var xTo = widthSvg;
    } else {
        var xFrom = widthSvg + randomLeft + randomSize; 
        var xTo = 0 - randomSize;
    }

    var rect = svg("rect");
    var animateX = svg("animate");
    var animateY = svg("animate");

    rect.setAttributeNS(null,'id', svgId + 'Rect' + i)
    rect.setAttributeNS(null, 'width', randomSize)
    rect.setAttributeNS(null, 'height', randomSize)
    rect.setAttributeNS(null, 'x', xFrom)
    rect.setAttributeNS(null, 'y', yFrom)
    rect.setAttributeNS(null, 'style', 'opacity:' + randomOpacity + ';' +
                                        'fill: #ab2469;'  )

    animateX.setAttributeNS(null, 'attributeName', 'x')
    animateX.setAttributeNS(null, 'attributeType', 'XML')
    animateX.setAttributeNS(null, 'from', xFrom)
    animateX.setAttributeNS(null, 'to', xTo)
    animateX.setAttributeNS(null, 'begin', '0s')
    animateX.setAttributeNS(null, 'dur', randomDur + 's')
    animateX.setAttributeNS(null, 'repeatCount', 'indefinite'); 

    animateY.setAttributeNS(null, 'attributeName', 'y')
    animateY.setAttributeNS(null, 'attributeType', 'XML')
    animateY.setAttributeNS(null, 'from', yFrom)
    animateY.setAttributeNS(null, 'to', yTo)
    animateY.setAttributeNS(null, 'begin', '0s')
    animateY.setAttributeNS(null, 'dur', randomDur + 's')
    animateY.setAttributeNS(null, 'repeatCount', 'indefinite');         

    rect.appendChild(animateX);
    rect.appendChild(animateY);
    document.getElementById(svgId).appendChild(rect);
}
}