Animate SVG视图框更改

Question

我目前使用velocity.js来控制我创建的SVG绘图上的一些动画。它与用户互动，所以当某些部分发生点击时，图片可能会向右或向下扩展。到目前为止，一切工作都很完美，直到SVG盒子的图片太大。

在这些情况下，我只是调整视图的大小来缩放图像。

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

这工作，但因为它不是动画它看起来并不大。它只是跳到新的尺寸。有没有办法使用velocity.js进行动画效果viewBox更改？

我试过这种方法：

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

但是，这并不做任何事情。

这超出了velocity.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

您可以通过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>