通过svg路径滚动运动图像 [英] Moving image on scroll through svg path

问题描述

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

 <？xml version =1.0？> 
< svg viewBox =0 0 120 120xmlns =http://www.w3.org/2000/svgversion =1.1xmlns：xlink =http：//www.w3。组织/ 1999 /的xlink> 
<！ - 以灰色绘制运动路径的轮廓，并在关键点绘制2个小圆圈 - > 
< path d =M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110stroke =greenstroke-width =2fill =none ID = theMotionPath/> 
< circle cx =10cy =110r =3fill =＃000/> 
< circle cx =110cy =10r =3fill =＃000/> 
 
<！ - 将沿着运动路径移动的红色圆圈。 - > 
< circle cx =0cy =r =5fill =red> 
 
<！ - 定义运动路径动画 - > 
< animateMotion dur =6srepeatCount =indefinite> 
< mpath xlink：href =＃theMotionPath/> 
< / animateMotion> 
< / circle> 
< / svg> 
  

解决方案

这样的东西？

如何运作：

1. 当我们收到滚动事件时，我们：


2. 计算我们页面的下方距离


3. 使用< path> 将此百分比转换为路径上的位置元素函数 getTotalLength（）和 getPointAtLength（）。


4. 重新定位点所以它出现在这一点上。

  function positionTheDot（）{//页面上的百分比是多少？ var scrollPercentage =（document.documentElement.scrollTop + document.body.scrollTop）/（document.documentElement.scrollHeight  -  document.documentElement.clientHeight）; //获取路径长度var path = document.getElementById（theMotionPath）; var pathLen = path.getTotalLength（）; //获取点的位置< scrollPercentage>沿着小路。 var pt = path.getPointAtLength（scrollPercentage * pathLen）; //在此处定位红点var dot = document.getElementById（dot）; dot.setAttribute（transform，translate（+ pt.x +，+ pt.y +））;当我们得到一个滚动event.window.addEventListener（scroll，positionTheDot）; //设置dot.positionTheDot（）;   
  .verylong {height：2000px;} svg {position：fixed;宽度：200px;身高：200px;}  
 
 < svg viewBox =0 0 120 120xmlns =http://www.w3.org/2000/svgversion =1.1xmlns：xlink =http://www.w3.org/1999/xlink> <！ - 以灰色绘制运动路径的轮廓，并在关键点绘制2个小圆圈 - > < path d =M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110stroke =greenstroke-width =2fill =noneid =theMotionPath /> < circle cx =10cy =110r =3fill =＃000/> < circle cx =110cy =10r =3fill =＃000/> <！ - 将沿着运动路径移动的红色圆圈。 - > < circle cx =0cy =0r =5fill =redid =dot/>< / svg>< div class =verylong>< / div> ;  
 

I want to move object through svg path on scroll=) I was trying to add parts of path on scroll into path, but it still doesn't work. Help!!!=) 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>

解决方案

Something like this?

How this works:

1. When we get a scroll event we:
2. Calculate how far down the page we are
3. Convert this percentage to a position on the path using the <path> element functions getTotalLength() and getPointAtLength().
4. Reposition the dot so that it appears at this point.

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>

这篇关于通过svg路径滚动运动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！