This page has been flagged with the following issues:
In the following code example, square markers are added to each end of a path. Copy this sample to a text file and save it with the .html file extension. Run it in Internet Explorer 9 to see the path with two markers on the screeen.
The path with markers will look like this:
<!DOCTYPE HTML> <html> <head></head> <body> <!-- Inline SVG --> <svg width="400" height="400"> <!-- Definition of marker --> <defs> <marker id="knob" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto"> <path d="M 0 0 L 10 5 L 0 10 z" /> </marker> </defs> <!-- Path that will have knobs at both ends --> <path d="M 50,100 Q 150,50 250,100" stroke="hotpink" stroke-width="10" fill="white" marker-start="url(#knob)" marker-end="url(#knob)" /> </svg> </body> </html>
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.
The SVGMarkerElement object has these events:
- onload: Occurs when the browser has fully parsed the element and all of its descendants.
The SVGMarkerElement object has these methods:
- setOrientToAngle: Sets the value of the orientAngle attribute to the specified angle.
- setOrientToAuto: Sets the value of the svgMarkerOrient attribute to auto.
The SVGMarkerElement object has these properties:
- 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.
- 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).
- markerHeight: Gets the height attribute of the marker element.
- markerUnits: Gets or sets the coordinate system for the markerWidth and markerHeight attributes and for the contents of the marker element.
- markerWidth: Gets the width attribute of the marker element.
- mask: Sets or retrieves a value that indicates a SVG mask.
- orientAngle: Gets the angle of orientation of the marker element.
- orientType: Gets the orientation type for a marker element.
- ownerSVGElement: Gets the nearest ancestor svg element.
- preserveAspectRatio: Gets an XML value that indicates whether to force uniform graphic scaling.
- refX: Gets the refX attribute on the marker element.
- refY: Gets the refY attribute on the marker element.
- style: Gets a style object.
- viewBox: Gets a value that indicates how a graphic scales to fit a container element.
- viewportElement: Gets the element that established the current viewport.
- xmlbase: Gets or sets the base attribute on the element.
- xmllang: Gets or sets a value that specifies the language that is used in the contents and attribute values of an element.
- xmlspace: Gets or sets a value that indicates whether white space is preserved in character data.
This article contains content originally from external sources.
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]