Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗? Update the question,所以它是on-topic,用于堆栈溢出。
                        
                        5年前关闭。
                                                                                            
                
        
我需要创建一个传送带动画,当您向下滚动页面时,该动画将传送带上的项目沿一个方向移动,如果再次向上滚动,则执行相反的操作。我发现这个示例或多或少是我所需要的,除了不是自动移动,而是需要通过滚动触发。

http://codepen.io/rezen/pen/vEgqs

有谁知道如何对此进行修改以实现这一目标?

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewport-fill="#00A8A4" width="1200px" height="600px">
   <defs>
    <g id="file">

                <path fill="#FFFFFF" opacity=".2" d="M-11.605-11.518c-1.043,0-1.889,0.846-1.889,1.888v147.313c0,1.042,0.845,1.888,1.889,1.888H93.932
                    c1.044,0,1.89-0.846,1.89-1.888V13.191L71.111-11.518H-11.605z"/>

            <line opacity="0.3" fill="none" stroke="#00504B" stroke-width="5.9066" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-13.494" y1="137.748" x2="95.822" y2="137.748"/>

            <line fill="none" stroke="#27BBB1" stroke-width="7.8755" stroke-miterlimit="10" x1="-13.494" y1="-9.63" x2="62.041" y2="-9.63"/>

            <line opacity="0.3" fill="none" stroke="#00504B" stroke-width="5.9066" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="65.436" y1="24.866" x2="96.238" y2="24.866"/>

            <path fill="#27BBB1" stroke="#006B64" stroke-width="5.9066" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M96.527,20.167H63.929c-1.043,0-1.889-0.846-1.889-1.89v-29.795"/>

                <path fill="#004C47" d="M71.111-11.518l24.711,24.709v124.491c0,1.042-0.846,1.888-1.89,1.888H-11.605
                    c-1.043,0-1.889-0.846-1.889-1.888V-9.63c0-1.042,0.845-1.888,1.889-1.888H71.111 M71.111-17.424h-82.716
                    c-4.298,0-7.795,3.497-7.795,7.794v147.313c0,4.298,3.497,7.794,7.795,7.794H93.932c4.299,0,7.796-3.497,7.796-7.794V13.191
                    c0-1.566-0.622-3.069-1.729-4.177L75.288-15.694C74.179-16.802,72.677-17.424,71.111-17.424L71.111-17.424z"/>

    </g>
   <g id="wheel-form">
            <path fill="#004C47" d="M28.396,5.907c12.237,0,22.316,9.96,22.466,22.203c0.074,6.003-2.194,11.677-6.388,15.975
                    c-4.193,4.298-9.808,6.705-15.811,6.779l-0.285,0.002c-12.239,0-22.32-9.96-22.471-22.201
                    C5.756,16.269,15.716,6.062,28.11,5.909l0.285-0.002H28.396 M28.395,0c-0.119,0-0.239,0.001-0.357,0.002
                    C12.36,0.196-0.19,13.061,0.002,28.736c0.192,15.556,12.862,28.036,28.377,28.036c0.119,0,0.239-0.001,0.357-0.002
                    c15.674-0.192,28.226-13.058,28.032-28.732C56.577,12.479,43.907-0.001,28.395,0L28.395,0z"/>
            <circle fill="none" stroke="#003D38" stroke-width="11.8133" stroke-miterlimit="10" cx="28.385" cy="28.384" r="9.91"/>
            <path opacity="0.47" fill="none" stroke="#00A79D" stroke-width="3.3441" stroke-linecap="round" stroke-miterlimit="10" d="
            M39.432,28.353c0,6.101-4.947,11.047-11.046,11.047s-11.047-4.946-11.047-11.047"/>
        </g>

        <g id="spokes">

                <line fill="none" stroke="#00A8A4" stroke-width="3.3439" stroke-linecap="round" stroke-miterlimit="10" x1="9.305" y1="28.621" x2="17.521" y2="28.52"/>

                <line fill="none" stroke="#00A8A4" stroke-width="3.3439" stroke-linecap="round" stroke-miterlimit="10" x1="39.315" y1="28.25" x2="47.529" y2="28.15"/>

                <line fill="none" stroke="#00A8A4" stroke-width="3.3439" stroke-linecap="round" stroke-miterlimit="10" x1="28.174" y1="8.628" x2="28.279" y2="17.122"/>

                <line fill="none" stroke="#00A8A4" stroke-width="3.3439" stroke-linecap="round" stroke-miterlimit="10" x1="28.557" y1="39.649" x2="28.662" y2="48.142"/>

            <animateTransform attributeName="transform" type="rotate"  from="0, 28.5,28.5"  to="360 , 28.5,28.5" dur="2s" repeatCount="indefinite"/>
        </g>

        <path id="conveyer"  transform="translate(18, 18)" fill="none" stroke="#002A25"  stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
        M893.69,28.622c0,20.935-16.972,37.907-37.908,37.907H29.105c-20.935,0-37.907-16.973-37.907-37.907l0,0
        c0-20.937,16.972-37.908,37.907-37.908h826.677C876.719-9.287,893.69,7.685,893.69,28.622L893.69,28.622z">

        </path>
 </defs>
 <g id="conveyer-files" transform="translate(70, 46)">
    <g>
        <use  xlink:href="#file"></use>
        <text x="0" y="124"  style="font-family:Arial;font-weight:bold;font-size:25px;fill:#004C47">
            HTML
        </text>
   </g>
   <g transform="translate(140, 0)">
        <use  xlink:href="#file"></use>
        <text x="0" y="124"  style="font-family:Arial;font-weight:bold;font-size:25px;fill:#004C47">
            CSS
        </text>
   </g>
   <g transform="translate(280, 0)">
        <use  xlink:href="#file"></use>
        <text x="0" y="124"  style="font-family:Arial;font-weight:bold;font-size:25px;fill:#004C47">
            JS
        </text>
   </g>

  <animateTransform attributeName="transform" type="translate" from="70, 46" to="710, 46" dur="8s" repeatCount="indefinite"/>

 </g>
 <g id="conveyer-full" transform="translate(20, 200)">
    <g transform="translate(20, 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>
    <g transform="translate(111.5 , 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>
    <g transform="translate(203 , 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>
    <g transform="translate(294.5 , 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>

    <g transform="translate(386, 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>
    <g transform="translate(477.5 , 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>
    <g transform="translate(569, 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>

    <g transform="translate(660.5 , 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>

    <g transform="translate(752 , 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>
    <g transform="translate(843.5, 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>


    <use  xlink:href="#conveyer" stroke-width="7" />
    <use  xlink:href="#conveyer" stroke-width="10" stroke-dasharray="12,12" >
        <animate attributeName="stroke-dashoffset" values="600;0" begin="0s" dur="8s" repeatCount="indefinite" />
    </use>
</g>

最佳答案

是的,但是在您的情况下,您可能必须修改/适应原始传送带的SVG定义。我通常使用非常好的Javascript库以编程方式处理SVG图形:svgjs

在此处查看动画示例:http://www.svgjs.com/clock/

关于javascript - 是否可以通过编程方式控制svg ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25748478/

10-09 23:10