Не удается добавить элемент <animateTransform> в путь SVG

Я пытаюсь анимировать определенные пути в SVG-файле, но я не могу добавить нужный тег <animateTransform> в качестве дочернего элемента этих путей.Не удается добавить элемент <animateTransform> в путь SVG

Вот мой код:

currentState.addEventListener("click", function(event) { 
    var i = 0; 

    var map_anim = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'animateTransform'); 
    map_anim.setAttributeNS(null, 'attributeName', 'transform'); 
    map_anim.setAttributeNS(null, 'attributeType', 'XML'); 
    map_anim.setAttributeNS(null, 'type', 'scale'); 
    map_anim.setAttributeNS(null, 'to', '2'); 
    map_anim.setAttributeNS(null, 'fill', 'freeze'); 
    var paths = event.currentTarget.children; 
    for (i = 0; i < paths.length; i++) { 
    paths[i].appendChild(map_anim); 
    } 
    map_anim.beginElement(); 
}, true);

Я прошел через этот код с помощью отладчика, и я знаю, что путь SVG в настоящее время доступен как часть массива путей. Я не могу понять, почему appendChild не будет работать, и я не смог найти другой метод, который я могу заменить.

Не могли бы вы посоветовать мне, как заставить эту анимацию работать?

Вот код пути, вошедший в консоль после функции OnClick работает:

<path xmlns="http://www.w3.org/2000/svg" class="st12" id="path" d="M165.7,347.4c3.3,0.9,6.4,1.9,9.6,2.6c1.1,0.2,2.3-0.4,3.5-0.6c-0.5-1.2-0.7-2.7-1.5-3.4 c-4.8-4.1-11.8-5.7-18.5-4.2c0.3-1.6,0.6-3,0.7-4.5c0.2-2,0.4-4.1,0.3-6.1c-0.2-2.2-1.4-3.8-3.6-4.6c-3.3-1.2-4.7-3.8-4.6-6.9 c0.1-4.2,1.1-8.4,1.1-12.6c0.1-8.1,0.7-16.2-3.2-23.8c-0.4-0.7-0.1-2.1,0.4-2.9c1.1-1.7,2.5-3.2,3.9-4.7c6.5-7.4,9.3-15.9,8.6-25.6 c0-0.5,0-1,0-1.8c23.4,6.4,46.6,12.7,70.1,19.2c-1,3.3-1.9,6.5-2.9,9.7c-5.5,18.5-11.1,37-16.7,55.4c-0.5,1.7-0.1,2.9,0.8,4.2 c22,32.4,43.9,64.9,65.8,97.3c3.1,4.5,6,9.1,9.2,13.5c0.6,0.9,1.8,1.4,3,1.9c0.4,5.6,1.8,11.2,4.6,16.3c0.2,0.4-0.1,1.5-0.5,2 c-2,2.5-4.1,5-6.3,7.4c-4,4.2-6.8,8.9-8.2,14.5c-0.4,1.5-0.1,3.4,0.4,4.9c1.2,3.3-0.4,8.3-3.6,9.9c-0.6,0.3-1.7,0.3-2.4,0 c-11.7-5.6-24.3-7.7-37.1-8.6c-0.9-0.1-1.7-0.3-2.6-0.3c-1.6,0-2.1-0.8-2.3-2.4c-1.1-8.1-2.6-16-6.8-23.2c-2-3.5-4.7-6.2-8.9-7.1 c-0.6-0.1-1.3-0.9-1.6-1.6c-0.7-1.4-1-3.2-1.9-4.4c-1.1-1.3-2.6-2.9-4.1-3.1c-5.7-0.7-8.2-5-11.3-8.7c-1-1.2-2-2.6-3.4-3.1 c-4.2-1.7-8.6-3-12.9-4.5c-0.9-0.3-1.8-0.7-2.6-1c-2-0.7-2.5-1.8-2-3.9c1.9-6.9,2.3-13.9-0.9-20.6c-1.3-2.8-3.2-5.4-5-8 c-2.7-4-6-7.7-6.8-12.7c-0.3-1.7-0.3-4.1,0.6-5.3c3.7-4.7,2.3-9.5,0.9-14.3c-0.9-3.2-2.2-6.4-3.2-9.6c-0.2-0.7-0.1-1.9,0.3-2.2 c3.5-2.8,3.3-6.2,1.8-9.9c-0.2-0.4-0.3-0.8-0.4-1.2C165.5,348.4,165.6,348.2,165.7,347.4z" fill="#000000" fill-opacity="1"> 
    </path>

Спасибо!

источник

2015-06-06 Danny

Вы уверены, что 'appendChild' не работает? Или это просто анимация, которая не работает? Вы могли бы создать скрипку с соответствующей разметкой? – jhinzmann

Я проверил, что анимация работает, если я вставляю тег в файл SVG вручную. Я не могу создать скрипку, потому что кодовая база довольно большая. – Danny

Я добавил код для пути, как он появляется после выполнения path.appendChild (map_anim). – Danny

Вам необходимо создать новый элемент для каждого пути. Если вы используете appendChild() существующий элемент другому родительскому элементу, он просто перемещается в новый родитель. Таким образом, результат вашего кода заключается в том, что только последний путь закончится с <animateTransform>.

источник

2015-06-06 02:51:09

Спасибо, это исправлено для меня! – Danny

Не удается добавить элемент <animateTransform> в путь SVG

ответ

Смежные вопросы