SVGMarkerElement
The SVGMarkerElement
interface provides access to the properties of <marker>
elements, as well as methods to manipulate them. The <marker>
element defines the graphics used for drawing marks on a shape.
The following properties and methods all return, or act on the attributes of the <marker>
element represented by SVGMarkerElement
.
Instance properties
This interface also inherits properties from its parent, SVGElement
.
SVGMarkerElement.markerUnits
Read only-
Returns an
SVGAnimatedEnumeration
object, with one of the following values:- 0
-
SVG_MARKERUNITS_UNKNOWN
which means that themarkerUnits
attribute has a value other than the two predefined keywords. - 1
-
SVG_MARKERUNITS_USERSPACEONUSE
which means that themarkerUnits
attribute has the keyword valueuserSpaceOnUse
. - 2
-
SVG_MARKERUNITS_STROKEWIDTH
which means that themarkerUnits
attribute has the keyword valuestrokeWidth
.
SVGMarkerElement.markerWidth
Read only-
Returns an
SVGAnimatedLength
object containing the width of the<marker>
viewport. SVGMarkerElement.markerHeight
Read only-
Returns an
SVGAnimatedLength
object containing the height of the<marker>
viewport. SVGMarkerElement.orientType
Read only-
Returns an
SVGAnimatedEnumeration
object, with one of the following values:- 0
-
SVG_MARKER_ORIENT_UNKNOWN
which means that theorient
attribute has a value other than the two predefined keywords. - 1
-
SVG_MARKERUNITS_ORIENT_AUTO
which means that theorient
attribute has the keyword valueauto
. - 2
-
SVG_MARKERUNITS_ORIENT_ANGLE
which means that theorient
attribute has an<angle>
or<number>
value indicating the angle.
SVGMarkerElement.orientAngle
Read only-
Returns an
SVGAnimatedAngle
object containing the angle of theorient
attribute. SVGMarkerElement.refX
Read only-
Returns an
SVGAnimatedLength
object containing the value of therefX
attribute of the<marker>
. SVGMarkerElement.refY
Read only-
Returns an
SVGAnimatedLength
object containing the value of therefY
attribute of the<marker>
. SVGMarkerElement.viewBox
Read only-
Returns an
SVGAnimatedRect
object containing anSVGRect
which contains the values set by theviewBox
attribute on the<marker>
. SVGMarkerElement.preserveAspectRatio
Read only-
Returns an
SVGPreserveAspectRatio
object which contains the values set by thepreserveAspectRatio
attribute on the<marker>
viewport.
Instance methods
This interface also inherits methods from its parent, SVGElement
.
SVGMarkerElement.setOrientToAuto()
-
Sets the value of the
orient
attribute toauto
. SVGMarkerElement.setOrientToAngle()
-
Sets the value of the
orient
attribute to a specific angle value.
Examples
The following SVG will be referenced in the examples.
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker
id="arrow"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="6"
markerHeight="6"
orient="90">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
</svg>
Finding the Width of the Marker
The markerWidth
property returns an SVGAnimatedLength
which contains an SVGLength
with the value of the markerWidth
attribute.
let marker = document.getElementById("arrow");
console.log(marker.markerWidth.baseVal.value); // 6
Updating the Orientation Angle
In the following example the value of the orient
attribute is updated using setOrientToAngle()
using an SVGAngle
created using SVGElement.createSVGAngle()
.
let svg = document.getElementById("svg");
let marker = document.getElementById("arrow");
console.log(marker.orientAngle.baseVal.value); // value in SVG above - 90
let angle = svg.createSVGAngle();
angle.value = "110";
marker.setOrientToAngle(angle);
console.log(marker.orientAngle.baseVal.value); // new value - 110
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # InterfaceSVGMarkerElement |
Browser compatibility
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.