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

回答

相關問題