Question

我正在尝试动画更改SVG元素的视口。单击SVG中的特定椭圆时，将更改视口，以便在椭圆上放大。根据我对W3C动画规范的解释，当使用fill="freeze"时，to属性中的值将保留。但是，当我使用console.log("after animation: "+canvas.getAttribute("viewBox"));时viewBox与之前相同（动画确实放大）。有关额外信息，单击椭圆时会添加<animate>。这是动画如何添加到<svg>;

的代码

var canvassnap=Snap(canvas);
var animation = '<animate id="smoothpan" attributeName="viewBox" begin="0s" dur="'+duration+'ms" from="0 0 1280 720" to="'+minX+' '+minY+' '+(maxX-minX)+' '+(maxY-minY)+'" fill="freeze" />';
var parse = Snap.parse(animation);
canvassnap.add(parse);

我不能正确理解规范吗？

Answer 1

SVG对每个属性都有两个值，您可以使用getAttribute或通过element.viewBox.baseVal获取的基值以及可以通过element.viewBox.animVal获取的动画值。

如果元素不是SMIL动画的主题，那么animVal == baseVal。

SMIL动画仅影响animVal，它是用于渲染的animVal。

SVG动画未按预期设置属性

1 个答案: