使用skrollr滚动绘制SVG

Question

当用户在视口上向下滚动时，我正在尝试绘制一个简单的svg。 我正在使用skrollr，因为它意味着简单，但我不能让它工作。

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1610.2 1604.6" style="enable-background:new 0 0 1610.2 1604.6;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#1D1D1D;}
    .st1{fill:none;stroke:#666666;stroke-miterlimit:10;}
    .st2{fill:none;stroke:#666666;stroke-width:1.0674;stroke-miterlimit:10;}
    .st3{fill:#666666;}
    .st4{fill:url(#SVGID_1_);stroke:#666666;stroke-miterlimit:10;}
    .st5{fill:#161616;stroke:#666666;stroke-miterlimit:10;}
    .st6{fill:url(#SVGID_2_);stroke:#666666;stroke-miterlimit:10;}
    .st7{fill:#F7F7F7;}
</style>

<rect data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  x="-397.1" y="-1042.5" class="" width="447.4" height="295"/>
<line data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st1" x1="-400" y1="-988.5" x2="-86" y2="-988.5"/>
<line data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st1" x1="-7" y1="-989" x2="50.3" y2="-988.5"/>
<rect data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  x="-74.5" y="-1016.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 685.2816 -322.584)" class="st2" width="55.5" height="55.5"/>
<path  data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st3" d="M-46.8-1025.2L-46.8-1025.2c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
    C-44.2-1026.3-45.3-1025.2-46.8-1025.2z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"   class=" st3" d="M-46.8-946.9L-46.8-946.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
    C-44.2-948-45.3-946.9-46.8-946.9z"/>
<path  data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st3" d="M-7.7-985.9L-7.7-985.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
    C-5.1-987.1-6.3-985.9-7.7-985.9z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st3" d="M50.3-986.2L50.3-986.2c-1.2,0-2.2-1-2.2-2.2l0,0c0-1.2,1-2.2,2.2-2.2h0c1.2,0,2.2,1,2.2,2.2l0,0
    C52.6-987.3,51.6-986.2,50.3-986.2z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st3" d="M-86-985.9L-86-985.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6l0,0c1.4,0,2.6,1.1,2.6,2.6l0,0
    C-83.4-987.1-84.6-985.9-86-985.9z"/>
<linearGradient data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"   id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="885.6667" y1="-1039.5" x2="885.6667" y2="-410.7027">
    <stop  offset="0" style="stop-color:#212121"/>
    <stop  offset="1" style="stop-color:#212121"/>
</linearGradient>
<polygon data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st4" points="50.3,-1042.5 50.3,-378.5 1721,-1040.5 "/>
<polygon class="st5" points="1721,-1040.5 2302.9,-1040.5 1564.7,-747.5 981.6,-747.5 "/>
<linearGradient id="SVGID_2_" data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  gradientUnits="userSpaceOnUse" x1="1564.6666" y1="-894" x2="2302.9167" y2="-894">
    <stop  offset="0" style="stop-color:#212121"/>
    <stop  offset="1" style="stop-color:#212121"/>
</linearGradient>
<polygon  data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st6" points="2302.9,-747.5 2302.9,-1040.5 1564.7,-747.5 "/>
<rect x="393" y="-926.5" class="st7" width="593" height="434"/>
<g data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" >
    <polyline class="st1" points="2.5,0 2.5,162 43.2,162 43.2,30 748.7,30 748.7,162 916.7,162 1516.8,162 1607.7,162 1607.7,911.1
        1512.8,911.1 1512.8,778.1 815.8,778.1 815.8,912.1 641.7,912.1 293.8,912.1 293.8,1264.1 293.8,1597.1 343.3,1597.1 343.3,1462.1
        1040.8,1462.1 1040.8,1602.1 1108.2,1602.1   "/>
    <circle class="st3" cx="2.5" cy="162" r="2.5"/>
    <circle class="st3" cx="43.2" cy="162" r="2.5"/>
    <circle class="st3" cx="748.7" cy="162" r="2.5"/>
    <circle class="st3" cx="1512.9" cy="778.1" r="2.5"/>
    <circle class="st3" cx="1512.8" cy="911" r="2.5"/>
    <circle class="st3" cx="1607.7" cy="911" r="2.5"/>
    <circle class="st3" cx="815.8" cy="778.4" r="2.5"/>
    <circle class="st3" cx="815.7" cy="912.1" r="2.5"/>
    <circle class="st3" cx="293.8" cy="1597" r="2.5"/>
    <circle class="st3" cx="343.5" cy="1597" r="2.5"/>
    <circle class="st3" cx="343.2" cy="1462.2" r="2.5"/>
    <circle class="st3" cx="1040.8" cy="1462" r="2.5"/>
    <circle class="st3" cx="1040.7" cy="1602.1" r="2.5"/>
</g>
</svg>

这是我的代码笔： http ： //codepen.io/ohmmho/pen/zqjbRW

可能是我将数据结束/起点设置为错误的元素？ 像'line'和'rect'这样的元素让我很困惑，我正在学习SVG动画。 关于这一点的一些亮点将不胜感激。

谢谢 ;）

Answer 1

最后，经过进一步的研究，我发现了我做错了什么： 像圆形或多边形这样的形状元素需要成为路径才能完成我正在尝试的东西。 您可以正确地从Illustrator导出svg文件或使用某些工具转换它们，有关此处的更多信息。

我的codepen现在可以使用了：D

Answer 2

您只能绘制具有笔划的对象。
在你的svg中，只有这些分类元素有一个笔画：

.st1 {填写：无;行程：＃666666;行程miterLimit分别：10;}

.st2 {填写：无;行程：＃666666;笔划宽度：1.0674;卒中miterLimit分别：10;}

你还需要用css来抵消这个笔划：

风格= “中风dasharray：2000;中风dashoffset：2000”

并尝试这些属性值 - 您可以使用任何Skrollr选项:(您要么将线从值设置移动到0，要么从0移动到偏移（以绘制对象）

数据顶端=“行程dashoffset：0;” 数据中心顶=“行程dashoffset：2000;”