如何计算SVG路径电流度答案

【问题标题】：How to calculate SVG path current degree如何计算SVG路径电流度
【发布时间】：2020-08-29 06:10:02
【问题描述】：

我正在尝试根据我在 illustrator 中创建的指南路径旋转对象。我确实找到了一种根据指南旋转对象的方法，但它按时运行，而不是像我希望的那样滚动。

我有这个 javascript 代码来确定对象的路径，这个animationMotion 可以按时自动旋转对象（而不是滚动）。

如何计算对象在与animationMotion 相同的路径上的角度，但基于滚动而不是时间？

一些工作 codepen 没有 animationMotoion。

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();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg>
<g>
	<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"/>
    
    
    
    
    
    <!--Wipe-->
    <g id="wipe">
        <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"/>
        <line class="st12" x1="-20.3" y1="17.9" x2="-33.3" y2="21.2"/>
        <path class="st13" d="M28.1,28.2c0,0-15.7-19.9-23.1-9.8"/>
        <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"/>
        <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"/>
        <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"/>
        <path class="st12" d="M-34,58.9c0,0,25.5-19.6,25.8-7.7"/>
        <path class="st15" d="M-34.2,58.8l26-7.7C-8.2,51.2-7.1,38.8-34.2,58.8z"/>
    </g>
</g>
<!-- IF you run this, the object will auto rotate but on time.
  <animateMotion 
           xlink:href="#wipe"
           dur="3s"
           begin="0s"
           fill="freeze"
            repeatCount="indefinite"
                 rotate="auto"
             >
    <mpath xlink:href="#tracker" />
  </animateMotion>
  
  -->
  </svg>

编辑：

我试图添加这个来获得度数，控制台工作但实际旋转不存在。

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 + ")");

度数有效，但变换旋转不适用。

错误：属性转换：预期数字，“…7578125）旋转（未定义）”。

【问题讨论】：

@MaximLensky 不幸的是我已经尝试过了，这不适用于我的 javascript 代码。
您的“编辑”计算从原点到点 pt 的角度。这不是你要找的东西吗？
@RobertLongson 你说得对，我还在研究 delta 函数，如果成功我会更新你。
@RobertLongson 我做对了，我可以通过控制台日志判断，但是转换旋转不能正常工作，我不明白为什么..
@RobertLongson 添加了一些调试控制台消息

标签： javascript html svg

【解决方案1】：

你已经在打电话了

var pt = path.getPointAtLength(scrollPercentage * pathLen );

如果您再次调用该函数并在任一方向上使用一个小增量，您将能够确定路径的方向。一点三角函数就可以得到你需要的旋转。

【讨论】：