Question

我正在尝试使svg线随着滚动移动。当我向下滚动页面时，它确实会绘制，但是我希望在绘制水平线时页面不会移动，这样它就停留在视口中，然后当该线向下绘制时让页面继续向下滚动。

我尝试了不同的svg绘制方法，但是没有人真正说明如何在固定的屏幕上来回移动以及如何根据绘制线的方向进行滚动。

开始在输出区域中滚动以查看该行。

HTML：

Window

JS：

<html>
<body>
        <svg xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="901.99px" height="5793.99px">
        <path id="line" fill-rule="evenodd"  stroke="rgb(0, 0, 0)"           
         stroke-width="0.66px" stroke-linecap="butt" stroke- 
          linejoin="miter" fill="rgb(255, 255, 255)"stroke- 
          linejoin="miter" fill="rgb(255, 255, 255)"
        d="M450.330,0.330 L450.330,657.330 L11.330,656.330 
        L11.330,1239.330 L900.330,1238.330 L900.330,1889.330 
        L1.330,1889.330 L1.330,2873.330 L795.330,2872.330 
        L795.330,4036.330 L60.330,4035.330 L60.330,4631.330 
        L585.330,4631.330 L584.330,5793.330 "/>
        </svg> 
</body>
</html>

SVG线停止水平滚动

0 个答案: