SVG Animations & Paths part 2

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

Popular posts from this blog

Drag&Drop API

Making Elements Draggable The drag and drop feature lets you "grab" an object and drag it to a different location. To make an element draggable, just set the  draggable  attribute to true: <img draggable =" true " /> Any HTML element can be draggable. The API for HTML5 drag and drop is event-based. Example: <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="box" ondrop ="drop(event)" ondragover ="allowDrop(event)" style="border:1px solid black; width:200px; height:200px"></div> <img id="image" src="sample...
Read more