У меня есть файл svg, состоящий из пучка путей, которые я оживляю по методу here. Это стандартный метод анимации путей - тот, у которого есть смещение тире, а что нет.Анимация связанного svg не работает; Работает отлично, когда inline
Я протестировал код, и он отлично работает в моем svg-файле, когда он написан inline, то есть код для путей svg записывается непосредственно в тот же документ, что и скрипт. Вы можете увидеть это в действии here. Скрипт используется это:
$(document).ready(function(){
var path = document.getElementsByTagName('path');
var length;
var anim = document.getElementsByTagName('animate');
for(i = 0; i < path.length; i++){
length = path[i].getTotalLength().toString();
path[i].setAttribute('stroke-dasharray',length+','+length);
anim[i].setAttribute('values','-'+length+';0');
}
});
Однако при попытке заставить его работать с файлом SVG в <object>, я не так повезло. Я правильно разместил файл, и он отображается хорошо. Когда я запускаю измененный скрипт, он работает нормально и присваивает значения длины, а не каждому элементу <path> и <animate>, как и следовало бы (вы можете проверить это, проверив элементы svg - свойство stroke-dasharray должно иметь значение, равное длине каждого пути).
Проблема заключается в том, что, несмотря на правильное изменение значений, что должно запускать анимацию, ничего не оживляет. Я не уверен, почему это было бы, поскольку код работает точно так же, как и встроенный, за исключением поиска в документе svg, а не в текущем документе ... здесь приведена модифицированная версия скрипта (для работы с нагруженный SVG, а не встроенный один):
$(document).ready(function(){
var a = document.getElementById("logoSVG");
//it's important to add an load event listener to the object, as it will load the svg doc asynchronously
a.addEventListener("load",function(){
var svgDoc = a.contentDocument; //get the inner DOM of .svg
var path = svgDoc.getElementsByClassName('line');
var length;
var anim = svgDoc.getElementsByTagName('animate');
for(i = 0; i < path.length; i++){
length = path[i].getTotalLength().toString();
path[i].setAttribute('stroke-dasharray',length+','+length);
anim[i].setAttribute('values','-'+length+';0');
}
},false);
});
Если вы хотели бы видеть приведенный выше код в действии (где он будет загружен в, а не инлайн), то есть here.