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ファイルを正しくエクスポートしたり、いくつかのツールでこれらのファイルを変換することができます。詳しくはhereを参照してください。

私codepenが動作するようになりました：D

Answer 2

あなただけのストロークを持つオブジェクトに描画することができます。あなたのSVGに
のみこれら分類要素が脳卒中を有する：

.st1 {記入：なし;脳卒中：＃666666;脳卒中miterLimitの：10;}

.st2 {記入：なし;脳卒中：位666666;ストローク幅：1.0674;ストローク-miterLimitの：10;}

ます。また、CSSで、このストロークを相殺する必要があります。

スタイル= "ストローク-dasharray：2000;ストローク-dashoffset：2000"

これらの属性値を試してください。任意のo Skrollrのオプション： （値をオフに設定した線を0に、0をオフセットに移動（オブジェクトを描く）のいずれかです。

data-top = "ストロークダッシュオフセット：0;" データ・センター・トップ=「ストローク-dashoffset：2000;」