title: How to calculate SVG path current degree
body: <p>I'm trying to rotate object upon guideline path I created in illustrator.
  I did found a way to rotate the object upon the guideline, but It's running on time and not scroll as I wish it to be.</p>
  
  <p>I have this javascript code to determine the path of the object and this <code>animationMotion</code> to rotate the object automatically on time (instead of scroll).</p>
  
  <p>How can I calculate the angle of the object on the path same as <code>animationMotion</code> but base it on scroll instead of time?</p>
  
  <p>Some working <a href="https://codepen.io/yotking789/pen/OJywpOB" rel="nofollow noreferrer">codepen</a> without <code>animationMotoion</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function positionTheElement() {
   var html = document.documentElement;
   var body = document.body;
      var scrollPercentage = (html.scrollTop + body.scrollTop - html.clientHeight) / (body.scrollHeight + 600 - html.clientHeight);
   var path = document.getElementById("tracker");
   var pathLen = path.getTotalLength();
   var pt = path.getPointAtLength(scrollPercentage * pathLen );
   var element = document.getElementById("wipe");
      element.setAttribute("transform", "translate("+ pt.x  + "," + pt.y + ")");   
  };
  window.addEventListener("scroll", positionTheElement);
  positionTheElement();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;svg&gt;
  &lt;g&gt;
   &lt;path
     id="tracker"
     d="M1343.5,32.5
             L1341,558C1339.8,583.3 1349.8,600.1 1313,611C1298,619 1247,631 1144,630C1041,629 277,630 277,630C277,630 136,625 136,658C130,687 119,719 126,747C133,775 120,1931 120,1931C120,1931 128,2029.8000000000002 208,2034.4C288,2039 1697.8,2034.4 1697.8,2034.4C1697.8,2034.4 1788,2016 1794,2124C1800,2232 1780,2700 1780,2700C1780,2700 1796.8000000000002,2794 1689.9,2793C1583,2792 938,2787 938,2787L249,2782C249,2782 151.39999999999998,2769.8 154.7,2863.9C158,2958 155,3552 155,3552C155,3552 159,3645.3999999999996 243.5,3632.7C328,3620 1484,3634 1484,3634L1491.8,3999" fill="transparent" stroke-width="0"/&gt;
      
      
      
      
      
      &lt;!--Wipe--&gt;
      &lt;g id="wipe"&gt;
          &lt;path class="st11" d="M33.3,1c0,0-6.9-14.1-24.7-3.6S-18.5-5.8-23-0.2s-10.3-3.3-10.3-3.3s-3.4,26.2-0.5,24.8
              c0.4-0.2,0.6-0.1,0.7,0.3c1.1,2.5-2.4,16.7-2.4,16.7s-3,22.1,0.8,20.7c3.8-1.5-1.4,23.2-1.4,23.2s-7.4,23.6,5.6,2.2
              s56.9-26.1,57-15.8s1.1,20.7,3.4-11.3c0.5-6.8,6.3-46.6,0.5-31.9S31.3,4.2,33.3,1z"/&gt;
          &lt;line class="st12" x1="-20.3" y1="17.9" x2="-33.3" y2="21.2"/&gt;
          &lt;path class="st13" d="M28.1,28.2c0,0-15.7-19.9-23.1-9.8"/&gt;
          &lt;path class="st14" d="M26.4,67.4c0,0-0.3-3-9.8-4.2c-9.5-1.2-2.4,1.6-2.4,1.6l13,13.8c0,0-0.3-0.8-0.6-5
              C26.5,69.5,26.4,67.4,26.4,67.4L26.4,67.4"/&gt;
          &lt;path class="st13" d="M29.1,19l3.5,3.2c-0.7-1.5-3,5.4-4,6.6C27.6,29.9,29.1,19,29.1,19z"/&gt;
          &lt;path class="st15" d="M-20.3,17.9c0,0-9.6,12.3-12.7,7.4c0.1-2,0.1-4-0.2-4C-33.5,21.3-20.3,17.9-20.3,17.9z"/&gt;
          &lt;path class="st12" d="M-34,58.9c0,0,25.5-19.6,25.8-7.7"/&gt;
          &lt;path class="st15" d="M-34.2,58.8l26-7.7C-8.2,51.2-7.1,38.8-34.2,58.8z"/&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  &lt;!-- IF you run this, the object will auto rotate but on time.
    &lt;animateMotion 
             xlink:href="#wipe"
             dur="3s"
             begin="0s"
             fill="freeze"
              repeatCount="indefinite"
                   rotate="auto"
               &gt;
      &lt;mpath xlink:href="#tracker" /&gt;
    &lt;/animateMotion&gt;
    
    --&gt;
    &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I have tried to add this to get the degrees, the console works but the actual rotate fails to exist.</p>
  
  <pre><code>var firstPoint = path.getPointAtLength(scrollPercentage * pathLen);
  var secondPoint = path.getPointAtLength(scrollPercentage * (pathLen + 3));
  
  //Get degree
  var deg = Math.atan2(firstPoint.y - secondPoint.y, firstPoint.x - secondPoint.x) * (180 / Math.PI);
  console.log(deg);
  var element = document.getElementById("wipe");
  element.setAttribute("transform", "translate("+ pt.x  + "," + pt.y + ") rotate(" + pt.deg + ")");
  </code></pre>
  
  <p>The degrees works but the transform rotation does not apply.</p>
  
  <blockquote>
    <p>Error:  attribute transform: Expected number, "…7578125)
    rotate(undefined)".</p>
  </blockquote>