SVG展開行verticaly

問題是如何在沒有stroke-dasharray的情況下展開垂直行。不知道如何做對。這是我的例子：SVG展開行verticaly

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_3" x="0px" y="0px" width="286px" height="286px" viewBox="0 0 286 286" enable-background="new 0 0 286 286" xml:space="preserve"> 
     <line fill="none" stroke="#3AB0F3" id="stroke-dasharray" stroke-width="244" stroke-miterlimit="10" x1="143" y1="0" x2="143" y2="286"/><animate 
       attributeName="stroke-dasharray" 
       from="0, 0" to="143, 143" 
       dur="3s" 
       repeatCount="1"/></line> 
    </svg>

這個問題的主要問題是如何設置SVG的屬性來擴展它沒有stroke-dasharray垂直。

以及來自d3圖表的一些jQuery代碼。

var mySVG1 = $('#Layer_3').drawsvg({ 
       duration: 3000 
      }); 

mySVG1.drawsvg('animate');

來源

2016-05-12 marin

這裏是我會怎麼做，在d：

d3.select('#lineSelect').transition().duration(1000).attr('y2',700)

這會從286的高度改爲700，但在這裏看到這個我已經改變了原來的高度，以2作爲輸出窗戶很小。

但是要真正看到這個，你需要它的容器，即svg來調整高度。目前，我只將其更改爲window.innerHeight，但它可以更新爲與該行相同。

var height = window.innerHeight; 
 

 
d3.select('svg').attr('height', height) 
 

 
d3.select('#lineSelect').transition().delay(500).duration(1000).attr('y2',700) //transition height after half a second

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="286px" height="286px" viewBox="0 0 286 286" enable-background="new 0 0 286 286" xml:space="preserve"> 
 
    <line id='lineSelect' fill="none" stroke="#3AB0F3" stroke-width="244" stroke-miterlimit="10" x1="143" y1="0" x2="143" y2="2" /> 
 
</svg>

小提琴：https://jsfiddle.net/thatOneGuy/27u7g3dt/2/

來源

2016-05-12 09:19:57 thatOneGuy

請記，我說 'lineSelect' 的ID來就行了。如果你不能添加這個，那麼只要你可以選擇這條線，例如d3.select（'line'），如果多於一行的線不能工作，你將不得不選擇什麼行的索引你想 – thatOneGuy

謝謝你的解決方案，它工作得很好。 – marin

SVG展開行verticaly

回答

相關問題