这里的帖子。
我按照skrollr（jquery）中的一个示例，在向下滚动时可以绘制SVG路径
http://www.denissemiranda.com/test/path.html
问题在于它适用于第一个SVG和我复制粘贴的第一个（现在在底部），但现在当我尝试更改它们中的任何一个时，滚动的东西不起作用，就像第二部分一样现场。我不知道我做错了什么。
我将它与superscrollorama结合使用以淡化文本（可能不是最好的解决方案，但我还在学习）
谢谢!!!
示例
这很有效 '
<div class="bloque1">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">
<path
style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"
d="M74,102.2c8.3-1.9,16.5-3.5,25-3.7c9.3-0.2,18.4,1.7,27.6,3.7
c-0.3,2.2-0.5,4.3-0.8,6.3c-0.9,7.3-1.9,14.7-2.7,22c-0.1,1.2-0.5,2-1.6,2.6c-3,1.9-6,4-9,6c-0.7,0.5-1,1-1,1.8
c0,8,0,16.1,0,24.1c0,0.8-0.3,1.3-1,1.6c-2.7,1.4-5.5,2.6-8.6,3c-3.4,0.4-6.6-0.4-9.7-1.9c-3.4-1.6-3.3-1.6-3.3-5.4
c0-7.2,0-14.4,0-21.6c0-0.8-0.3-1.3-0.9-1.7c-3.2-2.1-6.4-4.2-9.6-6.4c-0.4-0.3-0.9-0.9-0.9-1.5c-0.9-7.3-1.8-14.5-2.7-21.8
C74.6,107.2,74.3,104.8,74,102.2z"
/>
<path
style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"
d="M119.1,75.9c0,10.2-8.4,18.7-18.7,18.8
C90.1,94.7,81.5,86.2,81.5,76c0-10.5,8.5-18.9,18.9-18.9C110.6,57.1,119.1,65.6,119.1,75.9z"
/>
<path
style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"
d="M51.6,102.2c6-1.8,12.1-3.2,18.6-3.7c0.3,2.7,0.6,5.4,0.9,8
c0.8,6.8,1.5,13.7,2.3,20.5c0.2,1.5,0.3,3,0.5,4.4c0.1,0.5,0.4,1,0.8,1.3c2,1.4,4,2.7,6,4.1c0.4,0.3,0.7,0.8,0.7,1.3
c0,6.5,0,13.1,0,19.6c0,0.4-0.2,1-0.5,1.2c-1.9,1-3.8,2.1-5.9,2.9c-3.2,1.2-6.2,0.2-9.1-1.3c-3.2-1.7-3.2-1.7-3.2-5.3
c0-6.1,0-12.3,0-18.4c0-0.5-0.3-1-0.6-1.4c-2-2-4-4-5.9-6c-0.5-0.6-1-1.4-1.1-2.1c-1.2-8.2-2.4-16.5-3.6-24.7
C51.5,102.5,51.5,102.4,51.6,102.2z"
/>
<path
style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"
d="M83.5,91.1c-5.3,4.8-13.9,4.7-19.5-0.3c-5.7-5.1-6.6-13.7-2.2-19.9
c4.7-6.5,13.1-7.5,18.1-4.9C76.1,75.1,77.2,83.4,83.5,91.1z"
/>
<path
style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"
d="M130.5,98.7c5,1.3,9.9,2.6,14.9,3.9c-0.3,2.6-0.5,4.9-0.8,7.2
c-0.7,6.1-1.4,12.1-2,18.2c-0.1,0.8-0.4,1.4-1,2c-2.2,1.7-4.3,3.5-6.5,5.3c-0.8,0.6-1,1.2-1,2.2c0,6.7,0,13.4,0,20.1
c0,0.9-0.2,1.4-1,1.8c-2.2,1-4.3,2.1-6.5,2.8c-2.8,0.8-5.5-0.2-8-1.5c-3.2-1.7-3.2-1.7-3.2-5.3c0-4.7,0-9.5,0-14.2
c0-0.9,0.2-1.4,1-1.9c3.1-2,6.1-4.1,9.2-6.1c0.8-0.5,1.2-1.1,1.3-2c0.6-5.9,1.3-11.7,1.9-17.6c0.5-4.5,1-8.9,1.5-13.4
C130.3,99.7,130.4,99.4,130.5,98.7z"
/>
<path
style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"
d="M117.1,91.1c6.3-7.7,7.4-16,3.6-25.1c4.6-2.6,12.9-1.8,17.7,4.3
c4.7,6,4.1,14.9-1.4,20.1C131.4,95.7,122.6,96,117.1,91.1z"
/>
<path
style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"
d="M185.9,59.7c0,2.8-2.2,5-5,5h-35.5l-4.5,3.2l0-3.2h-2.8
c-2.8,0-5-2.2-5-5V48.4c0-2.8,2.2-5,5-5h42.8c2.8,0,5,2.2,5,5V59.7z"
/>
<path
style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"
d="M15.7,59.6c0,2.8,2.2,5,5,5h35.5l4.5,3.2l0-3.2h2.8c2.8,0,5-2.2,5-5
V48.3c0-2.8-2.2-5-5-5H20.7c-2.8,0-5,2.2-5,5V59.6z"
/>
<path
style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"
d="M126.7,46.4c0,2.8-2.2,5-5,5h-19.1l-2.2,3.2L98,51.4H78.9
c-2.8,0-5-2.2-5-5V35.2c0-2.8,2.2-5,5-5h42.7c2.8,0,5,2.2,5,5V46.4z"
/>
</svg>
<h2 id="fade-it"> Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit</b>
</div> <!--end of bloque1 div-->
这个没有用。唯一的区别是路径，但即使我从上面复制路径，它在向下滚动时也无法动画。
<div class="bloque2">
<h2 id="fade-it1"> <b>¿De qué sirven si carecen de emoción?</b></h2>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px">
<path
style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"
d="M240.9,102.4c-3.5-8.3-8.8-15.3-15.8-20.9c-8-6.4-17.1-10.1-27.1-11.1
c-6.5-0.6-13,0-19.3,1.9c-11,3.3-20,9.7-27,19.1c-0.6,0.9-1.3,1.8-2,2.8c-8-11.5-18.5-19.1-31.9-22c-13.4-3-26-0.7-37.8,6.4
c0.2,0.4,0.4,0.7,0.5,0.9c-1-0.9-1.7-0.2-2.4,0.4c-0.9,0.7-1.9,1.2-2.7,2c-2.3,2-4.6,4.1-6.7,6.3c-3.8,4-6.8,8.7-9.1,13.7
c-2.4,5.3-3.9,10.9-4.6,16.8c-0.8,7,0,13.8,2.1,20.4c2.3,7,5.4,13.5,9.1,19.8c5.7,9.6,12.6,18.4,20.1,26.6
c7.9,8.6,16.6,16.4,25.8,23.5c11.9,9.1,24.5,17,37.9,23.4c0.3,0.2,0.9,0.1,1.2,0c2.5-1.4,5-2.9,7.5-4.4
c14.6-8.7,28.4-18.7,41.1-30.2c11.4-10.3,21.8-21.6,30.4-34.5c4.7-7,8.7-14.4,11.6-22.5c1.7-4.7,2.9-9.5,3.2-14.5
C245.6,118,244.1,110,240.9,102.4z M156.8,145.3l0.2,28l-13.3,0.1l-0.2-28c-3-2.1-5-5.6-5.1-9.5c0-6.4,5.1-11.7,11.6-11.8
c6.4,0,11.7,5.1,11.8,11.6C161.8,139.7,159.8,143.2,156.8,145.3z"
/>
</svg>
</div><!--endofbloque2 div-->
答案 0 :(得分：0)
如果有人感兴趣，解决方法是将stroke-dasharray和stroke-dashoffset调整为每条路径的长度。 -
感谢skrollr的创建者Alexander Prinzhorn。