svg 变换旋转精度

Question

我正在尝试使用 svg 创建一个简单的测试，允许我更改质量设置 (FPS) 和 svg 上的旋转速度。

我注意到变换、旋转功能适用于度数。据我所知，使用小数作为度数是不可能提高精度的。

那么我们是不是卡在使用旋转度数了，这给了我们最多 360 块来划分一个圆，或者有没有办法以某种方式提高精度？

我问的原因是因为我创建了一支笔https://codepen.io/KaGys/pen/yKVjrr?editors=1111，我在其中添加了几个质量设置。更高的质量设置会导致更高的每秒帧数。这意味着如果 1 度是我可以旋转的最小单位，我将需要开始延迟动画以低于每帧 1 度，在我的最高质量设置（每秒最快帧）下仍然是一个相当快的旋转.我希望问题很清楚，如果没有，请告诉我，我会尽力澄清。

    var ultra = 1000 / 120;
    var high = 1000 / 60;
    var medium = 1000 / 30;
    var low = 1000 / 10;

    var quality = ultra;

    var speed = 1; // degrees per frame on ultra quality (converts to lower quality settings to maintain consistency)
    // I tried doing this on per second basis, which works but the problem is that degrees can not be decimals which causes inconsistent behavior
    speed = (speed * quality) / ultra; // Recalculate the speed for consistency across quality settings

  var rotateSettings = {
    path: document.getElementById("pathGroup"),
    active: false,
    speed: speed,
    quality: quality
  };

  function rotate() {
    if (this.active) {
      setTimeout(rotate.bind(this), this.quality);
      var currentRotation = Number(
        /\d+/.exec(this.path.getAttributeNS(null, "transform"))
      );
  currentRotation = currentRotation%360;
      console.log(this.speed);
      this.path.setAttributeNS(
        null,
        "transform",
        `rotate(${currentRotation + this.speed}, 60, 60)`
      );
    }
  }

  document.getElementById("btnRotate").addEventListener("click", e => {
    if (!rotateSettings.active) {
      rotateSettings.active = true;
      document.getElementById("btnRotate").style.background = "green";
      document.getElementById("btnRotate").style.color = "white";
      rotate.bind(rotateSettings)();
    } else {
      rotateSettings.active = false;
      document.getElementById("btnRotate").style.background = "white";
      document.getElementById("btnRotate").style.color = "green";
    }
  });

Answer 1

您可以通过SVG DOM读取变换角度

var currentRotation = this.path.transform.animVal[0].angle;