Animate SVG viewBox change

Question

В настоящее время я использую функцию velocity.js для управления некоторой анимацией на чертеже SVG, который я создаю. Он интерактивен с пользователем, поэтому, когда клик происходит в определенных частях, изображение может увеличиваться вправо или вниз. Пока все работает отлично, пока изображение не станет слишком большим для окна SVG.

В таких ситуациях я просто изменяю размер viewBox, чтобы масштабировать изображение.

svgDoc.setAttribute("viewBox", "0 0 " + svgDocWidth + " " + svgDocHeight); 

Это работает, но это не выглядит великолепно, потому что оно не анимировано. Он просто перескакивает на новый размер. Есть ли способ для анимации с изменением velocity.js viewBox?

Я попробовал этот подход:

$viewBox = $(svgDoc.viewBox); 
$viewBox.velocity({height: svgDocHeight, width: svgDocWidth}); 

Но это ничего не делать.

Возможно ли это за пределами того, что может поддерживать speed.js?

Решение на 2015-11-21

@Ian дал решение я в конце концов использовали. Это выглядело так:

var origHeight = this.svgDoc.viewBox.animVal.height; 
var origWidth = this.svgDoc.viewBox.animVal.width; 

var docHeight = this.SvgHeight(); 
var docWidth = this.SvgWidth(); 

if ((origHeight != docHeight) || (origWidth != docWidth)) 
{ 
    var deltaHeight = docHeight - origHeight; 
    var deltaWidth = docWidth - origWidth; 

    $(this.svgDoc).velocity(
    { 
     tween: 1 
    }, 
    { 
     progress: function(elements, complete, remaining, start, tweenValue) 
     { 
      var newWidth = origWidth + complete * deltaWidth; 
      var newHeight = origHeight + complete * deltaHeight; 
      elements[0].setAttribute('viewBox', '0 0 ' + newWidth + ' ' + newHeight); 
     } 
    }); 
} 

Answer 1

Я думаю, что SMIL является устаревшим в Chrome (пожалуйста, поправьте меня, если я ошибаюсь), поэтому я предполагаю, что там будет расти зависимость от других методов ,

Там нет причин вы не можете использовать скорость, но с вашими собственными расчетами и параметром/tweenValue прогресса, например, что-то немного, как это ...

$("#mysvg").velocity(
    { tween: 200 }, 
    { progress: animViewbox } 
) 

function animViewbox (elements, complete, remaining, start, tweenValue) { 
    elements[0].setAttribute('viewBox', '0 0 ' + tweenValue + ' ' + tweenValue); 
} 

jsfiddle

Answer 2

Вы можете анимировать viewBox плавно через SMIL. Как это ...

<svg width="100%" height="100%" viewBox="0 0 200 200"> 
 
    <animate attributeName="viewBox" to="0 0 400 400" dur="5s" fill="freeze" /> 
 
    <circle cx="100" cy="100" r="100" fill="green" /> 
 
</svg>