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

    SVG animations and path help

    Hello,

    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?
    https://ibb.co/iQ79qb

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    10,838
    Thanks
    6
    Thanked 1,296 Times in 1,266 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
    Code:
    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
  •