SVG анимация с динамически добавленными элементами - PullRequest
Новая
       7

SVG анимация с динамически добавленными элементами

11 голосов
/ 10 декабря 2011

Основываясь на этом коде, я пытаюсь анимировать динамически генерируемый элемент 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.

Ответы [ 4 ]

6 голосов
/ 19 декабря 2011

Не будет работать, если позже будет динамически добавлено в Chrome (будет работать с FF).

см. http://jsfiddle.net/tap0ri/SF5nE/2/

Это похоже на ошибку Chrome.

3 голосов
/ 19 июля 2012

Определенно [все еще] ошибка с Chrome. Запуск Chrome 19.0.1084.52

Этот код работает: http://jsfiddle.net/t3d28/

Этот код все еще не работает: http://jsfiddle.net/tap0ri/SF5nE/2/

0 голосов
/ 31 октября 2017

У меня все та же проблема 5 лет назад :) (и с svg-Filter тоже)

Я использую следующий взломать:

1. Я устанавливаю все атрибуты май с помощью setAtteribute, например ani.setAttribute ("attributeName", "transform");

2. Я прочитал и установил свой svg-root innerhtml: $ SvgRoot.html ($ svgRoot.html ());

Надеюсь, это кому-нибудь поможет, или кто-то может сказать мне лучший способ:)

0 голосов
/ 13 февраля 2015

Не работает на обоих навигаторах с 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>

см .: https://jsfiddle.net/oOroBax/xkb89y4h/

...