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.
0 kommentar(er)
