Class MarkerElement

java.lang.Object

com.vaadin.flow.dom.Node<com.vaadin.flow.dom.Element>

com.vaadin.flow.dom.Element

org.vaadin.firitin.element.svg.SvgElement

org.vaadin.firitin.element.svg.MarkerElement

All Implemented Interfaces:

Serializable

public class MarkerElement
extends SvgElement

A typed Java API for the SVG <marker> element.

The <marker> element defines a graphic used for drawing arrows or polymarkers on shape elements like <path>, <line>, <polyline>, and <polygon>.

Markers must be placed inside a <defs> element and referenced by ID using the marker-start, marker-mid, or marker-end attributes.

Example - Creating an arrowhead marker:

MarkerElement arrow = new MarkerElement("arrowhead")
    .viewBox(0, 0, 10, 10)
    .refX(10).refY(5)
    .markerWidth(6).markerHeight(6)
    .orient(MarkerElement.Orient.AUTO);

PathElement arrowPath = new PathElement()
    .d(p -> p.moveTo(0, 0).lineTo(10, 5).lineTo(0, 10).closePath())
    .fill(HexColor.of("#ff0000"));
arrow.add(arrowPath);

// Use on a line
lineElement.markerEnd(arrow);

Write-Only vs Read-Write Methods

This class provides two variants for each attribute setter:

• Default methods (e.g., refX(), refY()) - Use an optimized write-only approach. Attribute values are NOT stored on the server and cannot be retrieved via getAttribute().
• RW methods (e.g., refXRW(), refYRW()) - Use traditional setAttribute() which stores values on the server for later retrieval.

See Also:

• MDN: marker element
• Serialized Form

Nested Class Summary

Nested Classes

Modifier and Type	Class	Description
static enum	MarkerElement.MarkerUnits	Marker unit options.
static enum	MarkerElement.Orient	Orientation options for markers.

Nested classes/interfaces inherited from class SvgElement

SvgElement.PreserveAspectRatio

Constructor Summary

Constructors

Constructor	Description
MarkerElement()
MarkerElement(String id)	Creates a marker with the given ID.

Method Summary

Modifier and Type	Method	Description
MarkerElement	add(SvgElement... elements)	Adds content elements to this marker.
MarkerElement	markerHeight(double height)	Sets the height of the marker viewport.
MarkerElement	markerHeight(String height)	Sets the height of the marker viewport with a unit.
MarkerElement	markerHeightRW(double height)	Sets the height of the marker viewport (read-write).
MarkerElement	markerHeightRW(String height)	Sets the height of the marker viewport with a unit (read-write).
MarkerElement	markerSize(double width, double height)	Sets both markerWidth and markerHeight at once.
MarkerElement	markerSizeRW(double width, double height)	Sets both markerWidth and markerHeight at once (read-write).
MarkerElement	markerUnits(MarkerElement.MarkerUnits units)	Sets the coordinate system for markerWidth and markerHeight.
MarkerElement	markerUnitsRW(MarkerElement.MarkerUnits units)	Sets the coordinate system for markerWidth and markerHeight (read-write).
MarkerElement	markerWidth(double width)	Sets the width of the marker viewport.
MarkerElement	markerWidth(String width)	Sets the width of the marker viewport with a unit.
MarkerElement	markerWidthRW(double width)	Sets the width of the marker viewport (read-write).
MarkerElement	markerWidthRW(String width)	Sets the width of the marker viewport with a unit (read-write).
MarkerElement	orient(double angle)	Sets the orientation of the marker to a specific angle in degrees.
MarkerElement	orient(MarkerElement.Orient orient)	Sets the orientation of the marker.
MarkerElement	orientAuto()	Sets the marker to automatically orient along the path direction.
MarkerElement	orientAutoRW()	Sets the marker to automatically orient along the path direction (read-write).
MarkerElement	orientAutoStartReverse()	Sets the marker to automatically orient opposite to the path direction at the start.
MarkerElement	orientAutoStartReverseRW()	Sets the marker to automatically orient opposite to the path direction at the start (read-write).
MarkerElement	orientRW(double angle)	Sets the orientation of the marker to a specific angle in degrees (read-write).
MarkerElement	orientRW(MarkerElement.Orient orient)	Sets the orientation of the marker (read-write).
MarkerElement	preserveAspectRatio(String value)	Sets the preserveAspectRatio attribute.
MarkerElement	preserveAspectRatio(SvgElement.PreserveAspectRatio ratio)	Sets the preserveAspectRatio attribute.
MarkerElement	preserveAspectRatioRW(String value)	Sets the preserveAspectRatio attribute (read-write).
MarkerElement	preserveAspectRatioRW(SvgElement.PreserveAspectRatio ratio)	Sets the preserveAspectRatio attribute (read-write).
MarkerElement	ref(double refX, double refY)	Sets both refX and refY coordinates at once.
MarkerElement	refRW(double refX, double refY)	Sets both refX and refY coordinates at once (read-write).
MarkerElement	refX(double refX)	Sets the x coordinate of the marker's reference point.
MarkerElement	refX(String refX)	Sets the x coordinate of the marker's reference point with a unit.
MarkerElement	refXRW(double refX)	Sets the x coordinate of the marker's reference point (read-write).
MarkerElement	refXRW(String refX)	Sets the x coordinate of the marker's reference point with a unit (read-write).
MarkerElement	refY(double refY)	Sets the y coordinate of the marker's reference point.
MarkerElement	refY(String refY)	Sets the y coordinate of the marker's reference point with a unit.
MarkerElement	refYRW(double refY)	Sets the y coordinate of the marker's reference point (read-write).
MarkerElement	refYRW(String refY)	Sets the y coordinate of the marker's reference point with a unit (read-write).
MarkerElement	viewBox(double minX, double minY, double width, double height)	Sets the viewBox for the marker contents.
MarkerElement	viewBoxRW(double minX, double minY, double width, double height)	Sets the viewBox for the marker contents (read-write).

Methods inherited from class SvgElement

emptySvgRoot, flushPendingAttributes, getOuterHTML, getPendingOrAttribute, getStyle, height, height, id, scheduleBeforeClientResponse, setAttribute, setWriteOnlyAttribute, size, size, width, width

Methods inherited from class com.vaadin.flow.dom.Element

addAttachListener, addDetachListener, addEventListener, addPropertyChangeListener, addPropertyChangeListener, as, attachShadow, bindAttribute, bindProperty, bindText, callJsFunction, callJsFunction, createText, executeJs, executeJs, get, get, getAttribute, getAttributeNames, getChild, getChildCount, getChildren, getClassList, getComponent, getParent, getProperty, getProperty, getProperty, getProperty, getProperty, getPropertyBean, getPropertyBean, getPropertyNames, getPropertyRaw, getSelf, getShadowRoot, getTag, getText, getTextRecursively, getThemeList, hasAttribute, hasProperty, isEnabled, isTextNode, isVisible, removeAttribute, removeFromParent, removeFromTree, removeFromTree, removeProperty, scrollIntoView, scrollIntoView, setAttribute, setAttribute, setAttribute, setEnabled, setProperty, setProperty, setProperty, setPropertyBean, setPropertyJson, setPropertyList, setPropertyMap, setText, setVisible, toString

Methods inherited from class com.vaadin.flow.dom.Node

accept, appendChild, appendChild, appendVirtualChild, appendVirtualChild, ensureChildHasParent, equals, getNode, getParentNode, getStateProvider, hashCode, indexOfChild, insertChild, insertChild, isVirtualChild, removeAllChildren, removeChild, removeChild, removeChild, removeVirtualChild, removeVirtualChild, setChild

Methods inherited from class Object

clone, finalize, getClass, notify, notifyAll, wait, wait, wait

Constructor Details

MarkerElement

public MarkerElement()

MarkerElement

public MarkerElement(String id)

Creates a marker with the given ID.

Parameters:

id - the ID for referencing this marker

Method Details

viewBox

public MarkerElement viewBox(double minX,
 double minY,
 double width,
 double height)

Sets the viewBox for the marker contents.

Uses write-only optimization. Use viewBoxRW(double, double, double, double) if you need to read the value back.

Overrides:

viewBox in class SvgElement

Parameters:

minX - the minimum x value

minY - the minimum y value

width - the width

height - the height

Returns:

this element for method chaining

viewBoxRW

public MarkerElement viewBoxRW(double minX,
 double minY,
 double width,
 double height)

Sets the viewBox for the marker contents (read-write).

Parameters:

minX - the minimum x value

minY - the minimum y value

width - the width

height - the height

Returns:

this element for method chaining

refX

public MarkerElement refX(double refX)

Sets the x coordinate of the marker's reference point.

This is the point within the marker that is placed at the marked position.

Uses write-only optimization. Use refXRW(double) if you need to read the value back.

Parameters:

refX - the x coordinate of the reference point

Returns:

this element for method chaining

refX

public MarkerElement refX(String refX)

Sets the x coordinate of the marker's reference point with a unit.

Uses write-only optimization. Use refXRW(String) if you need to read the value back.

Parameters:

refX - the x coordinate (e.g., "10", "left", "center", "right")

Returns:

this element for method chaining

refXRW

public MarkerElement refXRW(double refX)

Sets the x coordinate of the marker's reference point (read-write).

Parameters:

refX - the x coordinate of the reference point

Returns:

this element for method chaining

refXRW

public MarkerElement refXRW(String refX)

Sets the x coordinate of the marker's reference point with a unit (read-write).

Parameters:

refX - the x coordinate (e.g., "10", "left", "center", "right")

Returns:

this element for method chaining

refY

public MarkerElement refY(double refY)

Sets the y coordinate of the marker's reference point.

This is the point within the marker that is placed at the marked position.

Uses write-only optimization. Use refYRW(double) if you need to read the value back.

Parameters:

refY - the y coordinate of the reference point

Returns:

this element for method chaining

refY

public MarkerElement refY(String refY)

Sets the y coordinate of the marker's reference point with a unit.

Uses write-only optimization. Use refYRW(String) if you need to read the value back.

Parameters:

refY - the y coordinate (e.g., "10", "top", "center", "bottom")

Returns:

this element for method chaining

refYRW

public MarkerElement refYRW(double refY)

Sets the y coordinate of the marker's reference point (read-write).

Parameters:

refY - the y coordinate of the reference point

Returns:

this element for method chaining

refYRW

public MarkerElement refYRW(String refY)

Sets the y coordinate of the marker's reference point with a unit (read-write).

Parameters:

refY - the y coordinate (e.g., "10", "top", "center", "bottom")

Returns:

this element for method chaining

ref

public MarkerElement ref(double refX,
 double refY)

Sets both refX and refY coordinates at once.

Uses write-only optimization. Use refRW(double, double) if you need to read the values back.

Parameters:

refX - the x coordinate of the reference point

refY - the y coordinate of the reference point

Returns:

this element for method chaining

refRW

public MarkerElement refRW(double refX,
 double refY)

Sets both refX and refY coordinates at once (read-write).

Parameters:

refX - the x coordinate of the reference point

refY - the y coordinate of the reference point

Returns:

this element for method chaining

markerWidth

public MarkerElement markerWidth(double width)

Sets the width of the marker viewport.

Uses write-only optimization. Use markerWidthRW(double) if you need to read the value back.

Parameters:

width - the marker width

Returns:

this element for method chaining

markerWidth

public MarkerElement markerWidth(String width)

Sets the width of the marker viewport with a unit.

Uses write-only optimization. Use markerWidthRW(String) if you need to read the value back.

Parameters:

width - the marker width (e.g., "10", "10px")

Returns:

this element for method chaining

markerWidthRW

public MarkerElement markerWidthRW(double width)

Sets the width of the marker viewport (read-write).

Parameters:

width - the marker width

Returns:

this element for method chaining

markerWidthRW

public MarkerElement markerWidthRW(String width)

Sets the width of the marker viewport with a unit (read-write).

Parameters:

width - the marker width (e.g., "10", "10px")

Returns:

this element for method chaining

markerHeight

public MarkerElement markerHeight(double height)

Sets the height of the marker viewport.

Uses write-only optimization. Use markerHeightRW(double) if you need to read the value back.

Parameters:

height - the marker height

Returns:

this element for method chaining

markerHeight

public MarkerElement markerHeight(String height)

Sets the height of the marker viewport with a unit.

Uses write-only optimization. Use markerHeightRW(String) if you need to read the value back.

Parameters:

height - the marker height (e.g., "10", "10px")

Returns:

this element for method chaining

markerHeightRW

public MarkerElement markerHeightRW(double height)

Sets the height of the marker viewport (read-write).

Parameters:

height - the marker height

Returns:

this element for method chaining

markerHeightRW

public MarkerElement markerHeightRW(String height)

Sets the height of the marker viewport with a unit (read-write).

Parameters:

height - the marker height (e.g., "10", "10px")

Returns:

this element for method chaining

markerSize

public MarkerElement markerSize(double width,
 double height)

Sets both markerWidth and markerHeight at once.

Uses write-only optimization. Use markerSizeRW(double, double) if you need to read the values back.

Parameters:

width - the marker width

height - the marker height

Returns:

this element for method chaining

markerSizeRW

public MarkerElement markerSizeRW(double width,
 double height)

Sets both markerWidth and markerHeight at once (read-write).

Parameters:

width - the marker width

height - the marker height

Returns:

this element for method chaining

orient

public MarkerElement orient(MarkerElement.Orient orient)

Sets the orientation of the marker.

Uses write-only optimization. Use orientRW(Orient) if you need to read the value back.

Parameters:

orient - the orientation

Returns:

this element for method chaining

orient

public MarkerElement orient(double angle)

Sets the orientation of the marker to a specific angle in degrees.

Uses write-only optimization. Use orientRW(double) if you need to read the value back.

Parameters:

angle - the rotation angle in degrees

Returns:

this element for method chaining

orientRW

public MarkerElement orientRW(MarkerElement.Orient orient)

Sets the orientation of the marker (read-write).

Parameters:

orient - the orientation

Returns:

this element for method chaining

orientRW

public MarkerElement orientRW(double angle)

Sets the orientation of the marker to a specific angle in degrees (read-write).

Parameters:

angle - the rotation angle in degrees

Returns:

this element for method chaining

orientAuto

public MarkerElement orientAuto()

Sets the marker to automatically orient along the path direction.

Uses write-only optimization. Use orientAutoRW() if you need to read the value back.

Returns:

this element for method chaining

orientAutoRW

public MarkerElement orientAutoRW()

Sets the marker to automatically orient along the path direction (read-write).

Returns:

this element for method chaining

orientAutoStartReverse

public MarkerElement orientAutoStartReverse()

Sets the marker to automatically orient opposite to the path direction at the start.

This is useful for creating arrows where the start arrow points backward.

Uses write-only optimization. Use orientAutoStartReverseRW() if you need to read the value back.

Returns:

this element for method chaining

orientAutoStartReverseRW

public MarkerElement orientAutoStartReverseRW()

Sets the marker to automatically orient opposite to the path direction at the start (read-write).

Returns:

this element for method chaining

markerUnits

public MarkerElement markerUnits(MarkerElement.MarkerUnits units)

Sets the coordinate system for markerWidth and markerHeight.

Uses write-only optimization. Use markerUnitsRW(MarkerUnits) if you need to read the value back.

Parameters:

units - the marker units

Returns:

this element for method chaining

markerUnitsRW

public MarkerElement markerUnitsRW(MarkerElement.MarkerUnits units)

Sets the coordinate system for markerWidth and markerHeight (read-write).

Parameters:

units - the marker units

Returns:

this element for method chaining

preserveAspectRatio

public MarkerElement preserveAspectRatio(String value)

Sets the preserveAspectRatio attribute.

Uses write-only optimization. Use preserveAspectRatioRW(String) if you need to read the value back.

Overrides:

preserveAspectRatio in class SvgElement

Parameters:

value - the preserveAspectRatio value

Returns:

this element for method chaining

preserveAspectRatioRW

public MarkerElement preserveAspectRatioRW(String value)

Sets the preserveAspectRatio attribute (read-write).

Parameters:

value - the preserveAspectRatio value

Returns:

this element for method chaining

preserveAspectRatio

public MarkerElement preserveAspectRatio(SvgElement.PreserveAspectRatio ratio)

Sets the preserveAspectRatio attribute.

Uses write-only optimization. Use preserveAspectRatioRW(PreserveAspectRatio) if you need to read the value back.

Overrides:

preserveAspectRatio in class SvgElement

Parameters:

ratio - the preserveAspectRatio setting

Returns:

this element for method chaining

preserveAspectRatioRW

public MarkerElement preserveAspectRatioRW(SvgElement.PreserveAspectRatio ratio)

Sets the preserveAspectRatio attribute (read-write).

Parameters:

ratio - the preserveAspectRatio setting

Returns:

this element for method chaining

add

public MarkerElement add(SvgElement... elements)

Adds content elements to this marker.

Parameters:

elements - the elements that define the marker graphic

Returns:

this element for method chaining