问题是如何在没有stroke-dasharray的情况下扩展行垂直。不知道该怎么做。这是我的例子:
<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');
答案 0 :(得分:3)
以下是我在d3中的表现:
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>