Bewegt Bild auf Bildlauf durch Svg Pfad

Question

Ich möchte Objekt über Svg Pfad auf scroll =) Ich habe versucht, Teile des Pfades auf Bildlauf in Pfad hinzufügen, aber es funktioniert immer noch nicht. Hilfe !!! =) 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

So etwas wie das?

Wie das funktioniert:

1. Wenn wir ein Scroll-Ereignis erhalten wir:
2. berechnen, wie weit unten auf der Seite sind wir
3. Konvertieren dieser Prozentsatz auf eine Position auf dem Weg über die <path> Element Funktionen getTotalLength() und getPointAtLength().
4. Positionieren Sie den Punkt neu, so dass er an dieser Stelle erscheint.

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>