fertcricket.blogg.se

commands Draw a line straight back to the start It saves you from having to repeat that first location and using a line command to get back there. It’s a cheap n’ easy way to draw a straight line directly back to the last place the “pen” was set down (probably the last M or m command). Z (or z, it doesn’t matter) “closes” the path. See the very last character Chris used there? Z. V and v move vertically absolutely and relatively as you’d surely guess.Ĭheck out this Chris Nager demo in which he draws a cross in an extremely tiny amount of code, thanks to relative coordinate drawing: It’s bigger brother H, as we could guess, means to draw to the exact horizontal coordinate 25. When we used l 25,0 we could have used h 25 which means “from where the pen currently is, draw 25 to the right. They also draw lines, but only take one value: horizontal or vertical. There are four other commands that are essentially simpler versions of the line commands. Just like the M and m commands, L and l take two numbers: either absolute or relative coordinates. Let’s look at two absolute commands: commands Pick up the pen and move it to 50,50 Put down the pen and draw a line to 100,100įollowed by a relative command: commands F r om the current position, move right 25 The lowercase version factors in where the “pen” currently is. m 100,100 means “Move the Pen 100 down and 100 right from wherever you currently are.”.M 100,100 means “Pick up the pen and move it to the exact coordinates 100,100”.The UPPERCASE version is the absolute version and the lowercase is the relative version. There is an UPPERCASE and a lowercase version. Many (but not all of them) come in a pair. So that if other commands do drawing, it now starts at this location. Don’t draw anything just yet, just move the location of the Pen. M says, in a metaphorical sense, pick up the pen and move it to the exact location 213.1, 6.7. All the commas are optional (they could be spaces).įor example, that first command is M. The numbers are passing values to those commands. We could reformat it to start making sense of it (still valid code): Here’s an example of a medium-complexity path, I’d say: I’m no expert here, but I thought it would be fun to dig into. Like anything computers, there is a reason to the rhyme. It’s a ton of numbers and letters smashed together into a long string. The value it has is a mini syntax all to itself. The path element takes a single attribute to describe what it draws: the d attribute. It can draw anything! I’ve heard that under the hood all the other drawing elements ultimately use path anyway. The element in SVG is the ultimate drawing element.