使用 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

可能是我将 data-end/start 指向了错误的元素？ 'line' 和 'rect' 之类的元素让我感到困惑，我正在学习 SVG 动画。对此有一些了解将不胜感激。

谢谢 ;)

Answer 1

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

我的代码笔现在可以用了:D

Answer 2

只能用笔划画入对象。
在你的 svg 中，只有这些分类元素有笔划：

.st1{填充：none；笔划：#666666；笔划斜接限制：10；}

.st2{fill:none;stroke:#666666;stroke-width:1.0674;stroke-miterlimit:10;}

你还需要用css来抵消这个笔画:

风格="stroke-dasharray:2000;stroke-dashoffset:2000"

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

数据顶部="stroke-dashoffset:0;" 数据中心顶部="stroke-dashoffset:2000;"

使用 skrollr 在滚动条上绘制 SVG

Drawing SVG on scroll with skrollr

javascript

css

svg

skrollr