Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Change SVG stroke start point

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #256907
    ErraticFox
    Participant

    Hello, I have made a stroke around one of my polygons in my SVGs. This stroke doesn’t connect start to end though as I’ve used stroke-dasharray and stroke-dashoffset to make a small stroke somewhere against the polygon. I’m now wanting to animate the stroke itself tracing around the polygon, while keeping it the same length I have. I originally thought “looks like I’m not able to do this in CSS, time to go to JS.” but at last, it doesn’t matter which I use as I’m not quite sure I’m able to move the starting point… :\

    My CodePen: https://codepen.io/ErraticFox/pen/RgXoZm

    My crude example to demonstrate my desired result: http://i.imgur.com/HAzZ5Ij.png

    P.S. Posting this in JavaScript because as far as I’m aware, there’s no way to do this with CSS.

    #256914
    Paulie_D
    Moderator

    Something like this I guess:

    https://codepen.io/Paulie-D/pen/OgKpwr

    But as far as I know the stroke always starts at the start point of the path / element based on the first defining co-ordinate and there is no way to change it.

    #256915
    ErraticFox
    Participant

    Thanks! Hmm, that’s weird and a little confusing. Because the way you’re doing it is making the stroke-dashoffset a negative value. Why does this move the starting point, but using a positive value only moves the end point? Because this was my first attempt on trying it out, but I used a positive value instead…

    #256918
    Paulie_D
    Moderator

    You can use a positive offset…it just goes the other way round

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.