使用 SVG animateTransform 在 SVG

问题描述

这是我之前提出的问题 Make HTML Canvas generate PDF-ready Line art? 的后续问题。在@Peter O. 的建议下，我重新设计了我的软件以使用 SVG 而不是 HTML Canvas。我现在能够创建高质量的图像：

整个对象有一个外部 <svg>。每个视图都有一个翻译后的 <svg>。而是将箭头绘制为路径。

这是产生箭头的相关代码：

    transformForPiece(p) {
        return 'translate(' + this.radius + ',' + this.radius + ') rotate('+p.angle+')'
    }
    idForPiece(p) {
        return "arrow-" + p.col + "," + p.row;
    }
    addpathForPiece(p) {
        let x = this.x(p.col);
        let y = this.y(p.row);
        let r = this.radius;
        var Box = document.createElementNS('http://www.w3.org/2000/svg','svg');
        Box.setAttribute('x',x-r);
        Box.setAttribute('y',y-r);
        Box.setAttribute('width',r*2);
        Box.setAttribute('height',r*2);
        this.svg.append(Box)

        /* linexy - draw a line to the X,Y position */
        function lxy(x,y){
            return "L " + x + " " + y + " ";
        }

        let arrow = document.createElementNS('http://www.w3.org/2000/svg','path');
        arrow.setAttribute('style','@R_502_4906@:none;fill:black');
        arrow.setAttribute('transform',this.transformForPiece(p));
        arrow.setAttribute('d','M 0 0 '+lxy(0,-r) + lxy(-r,0) + lxy(-r/2,0)
                          + lxy(-r/2,r) + lxy(+r/2,0) + lxy(r,0) + lxy(0,-r) + " Z ");
        arrow.setAttribute('id',this.idForPiece(p));
        p.path = arrow;         // modify the piece with its svg path
        Box.append(arrow);
    }

我可以使用 JavaScript 计时器为这些箭头的旋转设置动画：

/* Given a board drawer db,a piece p,a start and and end rotation,rotate it */
const INCREMENT_degrees = 10;
const INCREMENT_MS      = 10;
function rotatePieceTimer( db,p,start,end ) {
    if (start > end) {
        start = end;
    }
    p.angle = start;            // set the current angle
    db.drawPiece(p);            // draw the piece at the curren totation
    if (p.angle < end) {         // if we have more to go
        setTimeout( function () { rotatePieceTimer( db,start+INCREMENT_degrees,end); },INCREMENT_MS);
    }
}

这与事件相关：

    function roll (e) {
        /* Pick a random piece */
        let i = Math.floor(Math.random() * cells_wide);
        let j = Math.floor(Math.random() * cells_high);
        let p = board.piece(i,j); // get the piece
        console.log("roll p=",p);
        rotatePieceTimer(db,p.angle,Math.ceil(p.angle/180)*180+180) // rotate with timer
        //rotatePieceSVG(db,Math.ceil(p.angle/180)*180+180) // rotate with timer
        //$('#time').text(boardHistory.length);
    }

    $('#roll').click(  roll );

从注释掉的代码中可以看出，我想使用 SVG animationTransform 来制作动画。我所拥有的一切都很好，但是知道如何使动画转换工作会很不错。

我已经将工作代码抽象到这里：

<!DOCTYPE html>
<html lang="en" class="stylish" type="text/css>"
      <body>
        <svg width="400" height="400">
          <svg x="203" y="203" width="60.66666666666667" height="60.66666666666667">
            <path style="@R_502_4906@:none;fill:black" transform="translate(30.333333333333336,30.333333333333336) rotate(45)"
                  d="M 0 0 L 0 -30.333333333333336 L -30.333333333333336 0 L -15.166666666666668 0 L -15.166666666666668 30.333333333333336 L 15.166666666666668
                     30.333333333333336 L 15.166666666666668 0 L 30.333333333333336 0 L 0 -30.333333333333336  Z "
                  id="arrow-3,3">
              <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 30.333333333333336 30.333333333333336"
                                to="360 30.333333333333336 30.333333333333336" dur="1s" repeatCount="100">
              </animateTransform>
            </path>
    </svg>
    </svg>
      </body>
</html>

使用 animateTransform 的问题是箭头不能很好地旋转，就像我简单地更新 rotate(45) 中的 path CSS 变换一样。

我遇到的另一个问题是，当用户单击按钮时，我想使用此代码（已损坏）来实现此目的：

function rotatePieceSVG( db,end){
    // this just changes the attribute:

    var noAnimation = false;
    if (noAnimation) {
        p.angle = end;
        p.path.setAttribute('transform',db.transformForPiece(p));
        return;
    }

    // This is the animation I can't get to work...
    var t = document.createElementNS('http://www.w3.org/2000/svg','animateTransform');
    t.setAttribute('attributeName','transform');
    t.setAttribute('attributeType','XML');
    t.setAttribute('type','rotate');
    t.setAttribute('from',p.angle+' '+db.radius+' '+db.radius);
    p.angle = end;
    t.setAttribute('to',p.angle+' '+db.radius+' '+db.radius);
    t.setAttribute('dur','1s');
    p.path.append(t);
    console.log("after rotate: p=",p);
}

我已验证此代码将 animateTransform 添加到 DOM 的正确位置。但是，似乎将 animateTransform 添加到现有路径对象不会导致路径被动画化。我已经阅读了规范，但它很大，我可能错过了一些东西。我是否需要删除旧的路径对象并添加一个新的对象，而不仅仅是添加动画变换？大概。我还没试过。

所以我的问题：

如何让 animateTransform 正确旋转我的箭头？我试过摆弄 from= 和 to= 中的值，但我永远无法让箭头在中心旋转。
有没有办法将 animateTransform 添加到现有路径，还是需要删除当前路径并添加新路径？

完整代码在这里：https://jsfiddle.net/simsong/9udcga6r/1/

解决方法

您的代码中最突出的是您的 begin 中缺少 <animateTransform> 的值。 begin 值非常通用。

您可以将它们设置为 "0s"，这是默认值，并且与文档时间线开始的时间一致（基本上是窗口 load 事件）。现在不是您以后以交互方式添加标签的时候。到时候，0s就过去了。
您可以将它们设置为 "indefinite"，这样动画就不会开始。这通常与基于脚本的触发器结合使用，例如 SVGAnimationElement.beginElement()。
您可以将它们设置为任意事件。 "myButton.click" 将在带有 id="myButton" 的元素收到点击时开始动画。

语法还提供开始时间列表和延迟。非常值得研究 spec 中的语法以了解您可以做什么。（浏览器未实现的时间值规范的唯一部分是 wallclock() 函数。）

对于旋转中心，您需要仔细查看您变换的内容和旋转的内容。就您的代码而言，<animateTransform> 替换元素上的transform 属性整体。您可能想要的是添加到现有转换列表末尾的补充转换。这由属性 additive="sum"（默认为 "replace"）控制。

        <path style="stroke:none;fill:black" transform="translate(30.333,30.333) rotate(45)"
              d="M 0 0 L 0 -30.333 L -30.333 0 L -15.166 0 L -15.166 30.333 L 15.166
                 30.333 L 15.166 0 L 30.333 0 L 0 -30.333 Z "
              id="arrow-3,3">
          <animateTransform attributeName="transform" type="rotate"
                            from="0"
                            to="180"
                            begin="myButton.click" dur="1s" repeatCount="100"
                            additive="sum">
          </animateTransform>
        </path>

这将围绕本地用户空间坐标中的 (0,0) 点旋转元素，从 0 度到 180 度连续旋转 100 次。需要仔细研究的三件事：

旋转中心必须在本地用户空间坐标中设置，在应用所有先前的变换之后，因为它被添加到变换列表的末尾。（坐标系的变换，而不是绘制到其中的对象的变换。）这意味着：它与路径数据使用的坐标系相同。该路径的中心位于坐标系原点。
转换添加到底层元素转换。这意味着，它不会取代最初的 45 度旋转，而是增加了它。因此，从恒等变换开始加法变换通常是一个好主意。
如您所定义，旋转从 0 度到 180 度，然后立即重新开始。这意味着它将立即跳回其初始位置。如果您想要平滑移动，请从 0 度旋转到 360 度，或者设置属性 accumulate="sum"，这将在上一次迭代结束时开始下一次迭代。

css-animations javascript svg svg-animate