Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2015
    Thanked 0 Times in 0 Posts

    SVG animations and path help


    i am having a hard time understanding paths.
    In this excercise its telling me to put the pen on 0,0 then go down 200px

    But i cant seem to figure out where 0,0 is and 200 px from anywhere doesnt make a triangle.
    i am confused. Any help?

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Halle (Saale), Germany
    Thanked 1,319 Times in 1,289 Posts
    0,0 is by default at the top left corner of your SVG element. You have to imagine this as a coordinate system with an x axis (horizontal) and a y axis vertical. The numbers represent the position of a point on these two axes, the first is the x-position, the second is the y-position. A path element creates a “line” along a specified route, and you specify that route with corrdinate points in the “d” attribute. I suppose the reason why you don’t see anything is because the value is invalid as it’s missing commas between the x and y values. Try it with
    M 0,0 L 200,200 L 200,0 Z
    And there are many good sources that explain paths in more detail. For example, there is a difference betwee uppercase and lowercase letters in the d attribute where uppercase stands for absolute positions in the coordinate system and lowercase stands for positions relative to the current position of the “virtual pen”.

    Read here:


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts