动画 SVG viewBox 更改

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});

但这没有任何作用。

这超出了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 平滑地为 viewBox 制作动画。像这样...

<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>