使用skrollr绘制SVG滚动

我想绘制一个简单的svg，因为用户在视口上向下滚动。我使用skrollr，因为它意味着很简单，但我无法使它工作。使用skrollr绘制SVG滚动

<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

可能是我设置的数据结束/开始指向错误的元素呢？有“线条”和“矩形”等元素让我感到困惑，我正在学习SVG动画。有关此的一些亮点将不胜感激。

感谢;）

来源

2016-04-18 ohmmho

最后，进一步研究后，我发现我在做什么错了：像圆形或多边形的那些造型元素必须是为了完成我想要的路径。您可以正确导出您的svg文件或使用一些工具转换它们，有关此here的更多信息。

我的代码簿现在可以使用：D

来源

2016-04-19 06:20:24 ohmmho

您只能用笔划绘制对象。
在你的SVG只有这些归类的元素有一个行程：

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

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

您还需要弥补这个行程与CSS：

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

并尝试这些属性值 - 你可以使用任何o f Skrollr选项：（您要么将值从设置值移至0，要么从0移至偏移量（以绘制对象）

data-top =“stroke-dashoffset：0;” data-center-top =“stroke-dashoffset：2000;”

来源

2016-04-21 01:47:53

感谢乔丹，你是对的：元素需要有一个中风，他们需要**路径**不是为了有一个中风并填写它。 – ohmmho

使用skrollr绘制SVG滚动

回答

相关问题