2016-11-30 241 views
2

這是我第一次使用SVG,我想知道是否可以使用箭頭創建動畫線圖。我找到了多個沒有箭頭的動畫線條圖形,帶有箭頭的非動畫線條圖形和帶有箭頭的動畫直線,但並不完全符合我的要求。我附上了一些我一直在玩的codepen例子。有誰知道這是否可能/有解決方案?這將不勝感激!SVG動畫圖形箭頭

  1. 動畫一行缺少箭頭(需求箭頭): http://codepen.io/alexandraleigh/pen/jVaObd

    # HTML 
    <div class="graph__wrapper"> 
        <svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1"> 
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> 
         <path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844" id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path> 
        </g> 
        </svg> 
    </div> 
    
    
    # CSS(Less) 
    
    @import "lesshat"; 
    
    @darkgrey:   #303030; 
    
    *{ 
        box-sizing: border-box; 
    } 
    
    body{ 
        background: @darkgrey; 
    } 
    
    .graph__wrapper{ 
        width: 400px; 
        margin: 30px auto; 
        position: relative; 
    
        svg{ 
        position: absolute; 
        margin: 36px 0px 0px 15px; 
        } 
    } 
    
    .path { 
        stroke-dasharray: 1000; 
        stroke-dashoffset: 1000; 
        animation: dash 3s ease-in forwards; 
        animation-iteration-count: 1; 
        animation-delay: 1s; 
    } 
    
    @keyframes dash { 
        to { 
        stroke-dashoffset: 0; 
        } 
    } 
    
    .description{ 
        font-family: "Roboto"; 
        color:lighten(@darkgrey, 50%); 
        text-align: center; 
        margin: 40px 0px; 
    } 
    
  2. 動畫帶箭頭的直線(需要停止對路徑的多個點): http://codepen.io/alexandraleigh/pen/yVPYrY

  3. 我嘗試添加從#1到#2的路徑描述,並且它具有期望的最終圖形,只是沒有動畫: http://codepen.io/alexandraleigh/pen/pNdgWR

  4. 我還試圖從#2添加的箭頭標記#1,但箭頭不動畫: http://codepen.io/alexandraleigh/pen/aBVdVY

我也開放於使用插件如http://snapsvg.io/,但還沒有看到任何有助於我的情況的實例。

+0

這似乎是http://stackoverflow.com/questions/40864442/svg-progressbar-的副本動畫與起始圓/ 40865930或多或少,除了你想用一個三角形而不是一個圓。 –

回答

2

您可以用偏移運動(:運動路徑舊的語法)做到這一點。 請注意,這是一個高度實驗性的功能。它目前僅適用於Chrome。更多的我在這裏使用的「老」的語法,這就是當前工作中鉻,但它會很快切換到新的systax點......

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background: #303030; 
 
} 
 
.graph__wrapper { 
 
    width: 400px; 
 
    margin: 30px auto; 
 
    position: relative; 
 
    svg { 
 
    position: absolute; 
 
    margin: 36px 0px 0px 15px; 
 
    } 
 
} 
 
.path { 
 
    stroke-dasharray: 428; 
 
    stroke-dashoffset: 428; 
 
    animation: dash 3s ease-in forwards; 
 
    animation-iteration-count: 1; 
 
    animation-delay: 1s; 
 
} 
 
@keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@keyframes pm { 
 
    from { 
 
    motion-offset: 0%; 
 
    } 
 
    to { 
 
    motion-offset: 100% 
 
    } 
 
} 
 
#arrow { 
 
    animation: pm 3s ease-in forwards; 
 
    animation-iteration-count: 1; 
 
    animation-delay: 1s; 
 
    motion-path: path('M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844'); 
 
    motion-rotation: auto; 
 
    motion-anchor: center; 
 
} 
 
.description { 
 
    font-family: "Roboto"; 
 
    color: lighten(@darkgrey, 50%); 
 
    text-align: center; 
 
    margin: 40px 0px; 
 
}
<div class="graph__wrapper"> 
 
    <svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible"> 
 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> 
 
     <path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844" 
 
     id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path> 
 

 

 

 
     <polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white" /> 
 

 
    </g> 
 
    </svg> 
 
</div>

你也可以做這與animateMotion,但svg動畫很快被扼殺。你將不得不遲早重寫以任何方式代碼:-(

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background: #303030; 
 
} 
 
.graph__wrapper { 
 
    width: 400px; 
 
    margin: 30px auto; 
 
    position: relative; 
 
    svg { 
 
    position: absolute; 
 
    margin: 36px 0px 0px 15px; 
 
    } 
 
} 
 
.path { 
 
    stroke-dasharray: 428; 
 
    stroke-dashoffset: 428; 
 
    animation: dash 3s linear forwards; 
 
    animation-iteration-count: 1; 
 
    animation-delay: 1s; 
 
} 
 
@keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
.description { 
 
    font-family: "Roboto"; 
 
    color: lighten(@darkgrey, 50%); 
 
    text-align: center; 
 
    margin: 40px 0px; 
 
}
<div class="graph__wrapper"> 
 
    <svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible"> 
 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> 
 
     <path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844" 
 
     id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path> 
 

 

 

 
     <polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white"> 
 
     <animateMotion rotate="auto" begin="1s" dur="3s" repeatCount="1" fill="freeze"> 
 
      <mpath xlink:href="#Path-1" /> 
 
     </animateMotion> 
 
     </polyline> 
 

 
    </g> 
 
    </svg> 
 
</div>