Рисование файла SVG на холсте HTML5 в определенное время

Question

Я нашел тему Drawing an SVG file on a HTML5 canvas об рендеринге SVG. Есть ли способ рисовать SVG-анимационный файл в определенный момент времени? Я имею в виду, как изменить код

var img = new Image(); 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); // define time at here: time="1.3sec" 
} 
img.src = "myfile.svg"; 

таким образом, что img содержит в SVG определенное время? Файл myfile.svg содержит следующее:

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 200 200" 
    id="svg2"> 

    <g transform="translate(100, 100)"> 
     <path transform="matrix(0.99982594,0.01865711,-0.01865711,0.99982594,0,0)" style="opacity:1;fill:#28b327;fill-opacity:1;stroke:#000000;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" d="M 23.755845,-0.77020556 A 23.938168,23.938168 0 0 1 -0.1823229,23.167962 23.938168,23.938168 0 0 1 -24.12049,-0.77020556 23.938168,23.938168 0 0 1 -0.1823229,-24.708373 23.938168,23.938168 0 0 1 23.755845,-0.77020556 Z" id="ball-2-path4136"> 
     <animate to="M 17.577751,-4.4423325 A 17.748762,27.248762 1.0690357 0 1 -0.67630452,22.470547 17.748762,27.248762 1.0690357 0 1 -17.913594,-5.1046137 17.748762,27.248762 1.0690357 0 1 0.3404618,-32.017493 17.748762,27.248762 1.0690357 0 1 17.577751,-4.4423325 Z" dur="0.2" begin="1.4" attributeName="d" fill="freeze"/></path> 

    </g> 
</svg> 

Люди обычно предлагают использовать canvg, но, насколько я понял, он не поддерживает путь анимации, так что мой пример не работает с ним.

Answer 1

Вы можете просто использовать setTimeout отложить вставку площади, таким образом:

var delayInMilliseconds = 3000; 

img.onload = function() { 
    setTimeout(function() { 
     // This will happend 3 seconds after page load 
     ctx.drawImage(img, 0, 0); 
    }, delayInMilliseconds); 
} 
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg"; 

В случае, если вы хотите, чтобы иметь возможность указать дату и время события, используйте пользовательскую функцию подсчитывать время, оставшееся до целевой даты:

function getTimeTo(date) { 
    var time = date.getTime() - Date.now(); 
    return time; 
} 

И заменить delayInMillisecondsgetTimeTo(targetDate) с. См. this fiddle для экспериментов.