通过svg路径在滚动上移动图像

Question

我想通过滚动上的svg路径移动对象=）我试图在滚动路径中添加部分路径，但它仍然不起作用。帮助！=） https://jsfiddle.net/YuriiBielozertsev/Ltx9ed0L/

<?xml version="1.0"?> 
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <!-- Draw the outline of the motion path in grey, along with 2 small circles at key points --> 
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="green" stroke-width="2" fill="none" id="theMotionPath"/> 
     <circle cx="10" cy="110" r="3" fill="#000"/> 
     <circle cx="110" cy="10" r="3" fill="#000"/> 

     <!-- Red circle which will be moved along the motion path. --> 
     <circle cx="0" cy="" r="5" fill="red"> 

     <!-- Define the motion path animation --> 
     <animateMotion dur="6s" repeatCount="indefinite"> 
      <mpath xlink:href="#theMotionPath"/> 
     </animateMotion> 
    </circle> 
</svg> 

Answer 1

像这样的事情？

如何工作的：

1. 当我们拿到一个滚动事件我们：
2. 计算多远下跌的一页，我们是
3. 转换使用<path>元函数这一比例在路径上的位置getTotalLength()和getPointAtLength()。
4. 重新定位点，使其出现在这一点上。

function positionTheDot() { 
 

 
    // What percentage down the page are we? 
 
    var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop)/(document.documentElement.scrollHeight - document.documentElement.clientHeight); 
 

 
    // Get path length 
 
    var path = document.getElementById("theMotionPath"); 
 
    var pathLen = path.getTotalLength(); 
 
    
 
    // Get the position of a point at <scrollPercentage> along the path. 
 
    var pt = path.getPointAtLength(scrollPercentage * pathLen); 
 
    
 
    // Position the red dot at this point 
 
    var dot = document.getElementById("dot"); 
 
    dot.setAttribute("transform", "translate("+ pt.x + "," + pt.y + ")"); 
 
    
 
}; 
 

 
// Update dot position when we get a scroll event. 
 
window.addEventListener("scroll", positionTheDot); 
 

 
// Set the initial position of the dot. 
 
positionTheDot();

.verylong { 
 
    height: 2000px; 
 
} 
 

 
svg { 
 
    position: fixed; 
 
    width: 200px; 
 
    height: 200px; 
 
}

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <!-- Draw the outline of the motion path in grey, along with 2 small circles at key points --> 
 
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="green" stroke-width="2" fill="none" id="theMotionPath"/> 
 
    <circle cx="10" cy="110" r="3" fill="#000"/> 
 
    <circle cx="110" cy="10" r="3" fill="#000"/> 
 

 
    <!-- Red circle which will be moved along the motion path. --> 
 
    <circle cx="0" cy="0" r="5" fill="red" id="dot"/> 
 
</svg> 
 

 
<div class="verylong"> 
 
</div>