marker()
Produces a SVG "marker"
element.
Syntax
marker(
id STRING,
markerUnits STRING,
refX DECIMAL,
refY DECIMAL,
markerWidth DECIMAL,
markerHeight DECIMAL,
orient STRING )
RETURNS om.DomNode
- id is the SVG object identifier.
- markerUnits defines how the marker scales ("strokeWidth" or "userSpaceOnUse").
refX
defines the X coordinate of the reference point.refY
defines the Y coordinate of the reference point.markerWidth
defines the width of the marker.markerHeight
defines the height of the marker.orient
defines the orientation of the marker (like "auto") .
Usage
This function creates a "marker"
SVG DOM element from the parameters.
SVG markers define the rendering of start, mid and end of a line or path.
Markers are typically defined in a "defs"
SVG element, and then used in a style
definition with the marker-start
, marker-mid
and
marker-end
attributes, using the styleList()
and
styleDefinition()
functions (see example below).
Example
DEFINE root_svg, defs, m, p, n om.DomNode
DEFINE attr DYNAMIC ARRAY OF om.SaxAttributes
...
LET defs = fglsvgcanvas.defs( NULL )
CALL root_svg.appendChild( defs )
LET m = fglsvgcanvas.marker("m1", NULL, 5,5,10,10, "auto")
CALL defs.appendChild( m )
CALL m.appendChild( n:=fglsvgcanvas.circle(5,5,3) )
CALL n.setAttribute(SVGATT_STYLE,'stroke:gray; fill:blue;')
LET m = fglsvgcanvas.marker("m2", NULL, 2,6,15,15, "auto")
CALL defs.appendChild( m )
CALL m.appendChild( n:=fglsvgcanvas.path("M2,2 L2,11 L10,6 L2,2") )
CALL n.setAttribute(SVGATT_STYLE,'stroke:gray; fill:blue;')
LET attr[1] = om.SaxAttributes.create()
CALL attr[1].addAttribute(SVGATT_STROKE, "blue" )
CALL attr[1].addAttribute(SVGATT_STROKE_WIDTH, 1.5 )
CALL attr[1].addAttribute(SVGATT_FILL, "none" )
CALL attr[1].addAttribute(SVGATT_MARKER_START, fglsvgcanvas.url("m1") )
CALL attr[1].addAttribute(SVGATT_MARKER_END, fglsvgcanvas.url("m2") )
CALL defs.appendChild( fglsvgcanvas.styleList(
fglsvgcanvas.styleDefinition(".style_1",attr[1])
)
)
...
LET p = fglsvgcanvas.path("M100,100 L150,150 L200,150")
CALL p.setAttribute(SVGATT_STYLE,"style_1")