title: svg transform rotation precision
body: <p>I'm trying to create a simple test with an svg, allowing me to change a quality setting (FPS), and a speed of rotation on an svg.</p>
  
  <p>I noticed that the transform, rotate functionality works with degrees. To my knowledge it is not possible to increase precision by using decimals as degrees.</p>
  
  <p>So are we stuck using the rotation degrees, which gives us a maximum of 360 pieces to divide a circle into, or is there a way to increase the precision somehow ?</p>
  
  <p>The reason I ask is because I created a pen <a href="https://codepen.io/KaGys/pen/yKVjrr?editors=1111" rel="nofollow noreferrer">https://codepen.io/KaGys/pen/yKVjrr?editors=1111</a> in which I added several quality settings. A higher quality setting results in a higher number of frames per second. This means that if 1 degree is the smallest unit I can rotate at, I would need to start delaying the animation to go slower than 1 degree per frame, which at my highest quality setting (fastest frames per second) is still a pretty fast rotation. I hope the question is clear, if not, please let me know and I'll try to clarify.</p>
  
  <pre><code>    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 =&gt; {
      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";
      }
    });
  </code></pre>