Paths The <path> element is used to define a path. The following commands are available for path data: M : moveto L : lineto H : horizontal lineto V: vertical lineto C : curveto S : smooth curveto Q : quadratic Bézier curve T : smooth quadratic Bézier curveto A: elliptical Arc Z : closepath Define a path using the d attribute: <svg width="500" height="500"> < path d="M 0 0 L200 200 L200 0 Z" style="stroke:#000; fill:none;" /> </svg> Try It Yourself M places our "virtual pen" down at the position 0, 0. It then moves 200px down and to the right, then moves up to the position 200, 0. The Z command closes the shape, which results in a hypotenuse: All of the above commands can also be expressed with lower case letters. When capital letters are used, it indicates absolute position; lower case indicates relative position.
Comments
Post a Comment