スクロールで画像を移動する

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>