Ответ 1
Это не сработает, если добавить динамически позже на chrome (будет работать с FF).
см. http://jsfiddle.net/tap0ri/SF5nE/2/
это кажется хромной ошибкой.
SVG анимация с динамически добавленными элементами
На основе этого кода я пытаюсь анимировать динамически сгенерированный элемент SVG:
var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg');
var circle = document.createElementNS('http://www.w3.org/2000/svg','circle');
circle.setAttribute("cx", "10");
circle.setAttribute("cy", "10");
circle.setAttribute("r", "10");
circle.setAttribute("fill", "blue");
var ani = document.createElementNS("http://www.w3.org/2000/svg","animateTransform");
ani.setAttribute("attributeName", "transform");
ani.setAttribute("attributeType", "xml");
ani.setAttribute("type", "translate" );
ani.setAttribute("from", "10");
ani.setAttribute("to", "100");
ani.setAttribute("begin", "0s");
ani.setAttribute("dur", "2s");
ani.setAttribute("fill", "freeze");
circle.appendChild(ani);
svgnode.appendChild(circle);
document.getElementById('mydiv').appendChild(svgnode);
SVG отображается отлично, но анимация не работает. Если я пишу эквивалентный код в простой HTML/SVG, он работает. Я использую Chrome.
Ответы
Ответ 2
Определенно [Still] ошибка с Chrome. Запуск Chrome 19.0.1084.52
Этот код работает: http://jsfiddle.net/t3d28/
Этот код по-прежнему не работает: http://jsfiddle.net/tap0ri/SF5nE/2/
Ответ 3
У меня все еще такая же проблема 5 лет назад:) (и с svg-Filter тоже)
Я использую следующий хак:
1. Я установил все атрибуты атрибутов с помощью setAtteribute, например ani.setAttribute( "attributeName", "transform" );
2. Я прочитал и установил свой svg-root innerhtml: $ SvgRoot.html($ svgRoot.html());
Надеюсь, что это поможет кому-то, или кто-то может сказать мне лучший способ:)
Ответ 4
Не работает на обоих навигаторах с viewBox = "0 0 0 0".
Здесь работает:
<div id="mydiv">
<svg id="svgNode" version="1.1" width="100%" height="100%" viewBox="0 0 100% 100%" preserveAspectRatio="xMidYMid meet" id="ext-element-180"></svg>
</div>