Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/svg/elements/path below:

path · WebPlatform Docs

The path element is the generic element to define a shape.

DOM Interface

SVGElement

In the following code example, the path element is used to create a red curved path.

<svg width="400" height="400">
  <path d="M 50,100 Q 150,50 250,100" stroke="red" stroke-width="10" fill="white"/>
</svg>

Note: In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherent core HTML attributes, properties, events, methods, and styles.

Path data can contain newline characters and thus can be broken up into multiple lines to improve readability. Because of line-length limitations with certain related tools, it is recommended to split long path data strings across multiple lines, with each line not exceeding 255 characters. Also note that newline characters are allowed only at certain places within path data.

The syntax of path data is concise in order to allow for minimal file size and efficient downloads, because many SVG files will be dominated by their path data. Some of the ways that SVG attempts to minimize the size of path data are as follows:

• All instructions are expressed as one character (for example, a moveto is expressed as an M).

• Superfluous white space and separators such as commas can be eliminated (for example, “M 100 100 L 200 200” contains unnecessary spaces and could be expressed more compactly as “M100 100L200 200”).

• The command letter can be eliminated on subsequent commands if the same command is used multiple times in a row (for example, you can drop the second L in “M 100 200 L 200 100 L -100 -200” and use “M 100 200 L 200 100 -100 -200” instead).

• Relative versions of all commands are available (uppercase means absolute coordinates, lowercase means relative coordinates).

• Alternate forms of lineto are available to optimize the special cases of horizontal and vertical lines (absolute and relative).

• Alternate forms of curve are available to optimize the special cases where some of the control points on the current segment can be determined automatically from the control points on the previous segment.

The path-data syntax is a prefix notation (that is, commands followed by parameters). The only allowable decimal point is a Unicode U+0046 FULL STOP (“.”) character (also referred to in Unicode as PERIOD, dot, and decimal point) and no other delimiter characters are allowed. (For example, the following is an invalid numeric value in a path data stream: "13,000.56". Instead, say: "13000.56".)

For the relative versions of the commands, all coordinate values are relative to the current point at the start of the command. For example, the absolute version of moveto is M whereas its relative form is indicated with a lowercase m. Absolute versus relative path commands are discussed in the following table.

Note: In the Path Command Table below, the following notation is used.

{

• Scalable Vector Graphics: Paths, Section 8.5.23

The SVGPathElement object has these events:

• onload: Occurs when the browser has fully parsed the element and all of its descendants.

The SVGPathElement object has these methods:

• createSVGPathSegArcAbs: Returns a stand-alone, parentless SVGPathSegArcAbs object.
• createSVGPathSegArcRel: Returns a stand-alone, parentless SVGPathSegArcRel object.
• createSVGPathSegClosePath: Returns a stand-alone, parentless SVGPathSegClosePath object.
• createSVGPathSegCurvetoCubicAbs: Returns a stand-alone, parentless SVGPathSegCurvetoCubicAbs object.
• createSVGPathSegCurvetoCubicRel: Returns a stand-alone, parentless SVGPathSegCurvetoCubicRel object.
• createSVGPathSegCurvetoCubicSmoothAbs: Returns a stand-alone, parentless SVGPathSegCurvetoCubicSmoothAbs object.
• createSVGPathSegCurvetoCubicSmoothRel: Returns a stand-alone, parentless SVGPathSegCurvetoCubicSmoothRel object.
• createSVGPathSegCurvetoQuadraticAbs: Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticAbs object.
• createSVGPathSegCurvetoQuadraticRel: Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticRel object.
• createSVGPathSegCurvetoQuadraticSmoothAbs: Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothAbs object.
• createSVGPathSegCurvetoQuadraticSmoothRel: Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothRel object.
• createSVGPathSegLinetoAbs: Returns a stand-alone, parentless SVGPathSegLinetoAbs object.
• createSVGPathSegLinetoHorizontalAbs: Returns a stand-alone, parentless SVGPathSegLinetoHorizontalAbs object.
• createSVGPathSegLinetoHorizontalRel: Returns a stand-alone, parentless SVGPathSegLinetoHorizontalRel object.
• createSVGPathSegLinetoRel: Returns a stand-alone, parentless SVGPathSegLinetoRel object.
• createSVGPathSegLinetoVerticalAbs: Returns a stand-alone, parentless SVGPathSegLinetoVerticalAbs object.
• createSVGPathSegLinetoVerticalRel: Returns a stand-alone, parentless SVGPathSegLinetoVerticalRel object.
• createSVGPathSegMovetoAbs: Returns a standalone parentless SVGPathSegMovetoAbs object.
• createSVGPathSegMovetoRel: Returns a stand-alone, parentless SVGPathSegMovetoRel object.
• getBBox: Gets the bounding box, in current user space, of the geometry of all contained graphics elements.
• getCTM: Gets the transformation matrix that transforms from the current user units to the viewport coordinate system for the nearestViewportElement object.
• getPathSegAtLength: Gets the index of pathSegList by using the specified distance along the path.
• getPointAtLength: Gets the (x,y) coordinate in user space that is the specified distance along the path.
• getScreenCTM: Gets the transformation matrix from the current user units to the screen coordinate system.
• getTotalLength: Gets the total length of the path, as a distance in the current user coordinate system.
• getTransformToElement: Gets the transformation matrix that transforms from the user coordinate system on the current element to the user coordinate system on the specified target element.
• hasExtension: Determines if the specified extension is supported.

The SVGPathElement object has these properties:

• animatedNormalizedPathSegList: Gets or sets the normalized animated contents of

the d attribute.

• animatedPathSegList: Gets or sets the animated contents of the d attribute in a form that matches the SVG syntax.
• className: Gets the names of the classes that are assigned to this object.
• clipPath: Sets or retrieves a reference to the SVG graphical object that will be used as the clipping path.
• externalResourcesRequired: Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
• farthestViewportElement: Gets a value that represents the farthest ancestor svg element.
• fill: Sets or retrieves a value that indicates the color to paint the interior of the given graphical element.
• fillOpacity: Sets or retrieves a value that specifies the opacity of the painting operation that is used to paint the interior of the current object.
• fillRule: Sets or retrieves a value that indicates the algorithm that is to be used to determine what parts of the canvas are included inside the shape.
• focusable: Determines if an element can acquire keyboard focus (that is, receive keyboard events) and be a target for field-to-field navigation actions (such as when a user presses the Tab key).
• marker: Sets or retrieves a value that specifies the marker symbol that is used for all vertices on the given path element or basic shape.
• markerEnd: Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at the final vertex of a given path element or basic shape.
• markerMid: Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at every other vertex (that is, every vertex except the first and last) of a given path element or basic shape.
• markerStart: Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at the first vertex of a given path element or basic shape.
• mask: Sets or retrieves a value that indicates a SVG mask.
• nearestViewportElement: Gets a value that indicates which element established the current viewport.
• normalizedPathSegList: Gets or sets the normalized static contents of the d attribute.
• ownerSVGElement: Gets the nearest ancestor svg element.

SVG 1.1

W3C Recommendation

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4