|
|
- You can use the <path> to define a path.
|
A D V E R T I S E M E N T
The <path> Tag
|
|
|
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
|
|
|
The example above define a path that starts at position 250 150 with a line to position 150 350 then from there a line to 350 350 and finally closing the path back to 250 150..
|
|
The following example creates a spiral:.
|
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
|
|
Elements of the <path> tag:
|
The path element is the single most useful tag for creating professional looking SVG document and it's the most difficult tag to hand-code in SVG. It is hard to visualize anything but the most simple of paths.
|
|
The following table describe the attributes of path element:
|
| Attribute |
Explanation |
| d |
A set of commands which define the path. (See below) |
| pathLength |
If present then the path will be scaled so that the computed path length of the points equals this value. A negative value is an error. (Note: Unsupported by Adobe's plugin) |
| transform |
A list of transformations. <Jump to: Transformation> |
| Presentation Attributes |
Color,FillStroke, Graphics, Markers |
| marker-offset |
auto length |
|
Elements of the Path Data:
|
|
- The path is defined in the 'd' attribute of the 'path' tag by a string of white space seperated coordinates and commands.
Path command is case-sensitive, An uppercase command's points use absolute postioning and a lowercase command's points are relative to the last point. The one exception to this is the first point always uses absolute postioning.
|
| Command |
Parameters |
Repeat |
Explanation |
| M |
x,y |
Yes |
moveto: Moves the pen to a new location. No line is drawn. All path data must begin with a 'moveto' command. |
| L |
x,y |
Yes |
lineto: Draws a line from the current point to the point (x,y). |
| H |
x |
Yes |
horizontal lineto: Draws a horizontal line from the current point to x. |
| V |
y |
Yes |
vertical lineto: Draws a vertical line from the current point to y. |
| C |
x1 y1 x2 y2 x y |
Yes |
curveto: Draw a cubic bezier curve to the point (x,y) where the points (x1,y1) and (x2,y2) are the start and end control points, respectively. |
| S |
x2 y2 x y |
Yes |
shorthand/smooth curveto: Draw a curve to the point (x,y) where the point (x2,y2) is the end control point and the start control point is the reflection of the last point's end control point. |
| Q |
x1 y1 x y |
Yes |
Quadratic Bezier curveto: Draw a quadratic bezier between the last point and point (x,y) using the point (x1,y1) as the control point. |
| T |
x y |
Yes |
Shorthand/smooth quadratic Bezier curveto: Draw a quadratic bezier between the last point and point (x,y) using the reflection of the last control point as the control point |
| A |
** |
Yes |
elliptical arc: Draws and arc from the current point to x, y. The actual scale factor and position of the arc needed to bridge the two points is computed by the SVG viewer. |
| z |
- |
No |
closepath: Closes the path. A line is drawn from the last point to the first. |
|
Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
Keywords:
svg viewer, svg file, svg text, svg editor, adobe svg, svg distribution,
svg graphics, nbc radio svg, javascript svg, svg antivirus
|
|
| HTML Quizzes |
|
|
| XML Quizzes |
|
|
| Browser Scripting Quizzes |
|
|
| Server Scripting Quizzes |
|
|
| .NET (dotnet) Quizzes |
|
|
| Multimedia Quizzes |
|
|
| Web Building Quizzes |
|
|
| Java Quizzes |
|
|
| Programming Langauges Quizzes |
|
|
| Soft Skills Quizzes |
|
|
| Database Quizzes |
|
|
| Operating System Quizzes |
|
|
| Software Testing Quizzes |
|
|
| SAP Module Quizzes |
|
|
| Networking Programming Quizzes |
|
|
| Microsoft Office Quizzes |
|
|
| Accounting Quizzes |
|
|
|
