CODEWITHSUNDEEP
javascriptjquerycssd3.jssvg
Marin
Marin

Reputation: 1121

SVG expand line verticaly

The question is how to expand line vertical without stroke-dasharray. Don't know how to do it right. This is my example:

<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>

Main problem on this is how to set property on SVG to expand it vertical without stroke-dasharray.

And some jQuery code from d3 charts.

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

mySVG1.drawsvg('animate');

Upvotes: 1

Views: 371

Answers (1)

thatOneGuy
thatOneGuy

Reputation: 10612

Here is how I would do it in d3 :

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

This would change your height from 286 to 700. But to see this here I have changed the original height to 2 as the output window is small.

But to actually see this you need its container, i.e the svg to adjust height to. For the time being, I only changed it to window.innerHeight but it can be updated the same as the line.

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>

Fiddle : https://jsfiddle.net/thatOneGuy/27u7g3dt/2/

Upvotes: 3

Related Questions