Proposals/Non-interactive marker improvements

From SVG

This is a proposal to improve the existing, non-interactive markers that can be placed on paths.

Name: marker-start, marker-end
Value: <marker> | auto | inherit
Initial: none
Applies to: path, line, polygon and polyline elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified


Name: marker-mid
Value: <marker> [ , <marker> ]* | inherit
Initial: none
Applies to: path, line, polygon and polyline elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified


Name: marker-position
Value: [ <marker-pos> ] [, <marker-pos> ]* | inherit
Initial: corner
Applies to: path, line, polygon and polyline elements
Inherited: yes
Percentages: refer to length of the path
Media: visual
Computed value: as specified


Name: marker
Value:

start [ <marker> | auto ] [ , <mid-markers> ]? [, end [ <marker> | auto ] ]? |
<mid-markers> [ , end [ <marker> | auto ] ]? |
end [ <marker> | auto ] |
<marker>

Initial: see individual properties
Applies to: path, line, polygon and polyline elements
Inherited: yes
Percentages: see individual properties
Media: visual
Computed value: see individual properties

where:

  • <marker> = <funciri> | none
  • <marker-pos> = corner | edge | <length>
  • <mid-markers> = <marker-pos>? <marker>

The marker-mid property has become a list, and is paired with values from the marker-position property, which is also a list. This is done in the same way as the background-* properties. If there are fewer values in the marker-position list than there are in the marker-mid list, then the marker-position items are repeated until there are enough.

The list of values in the marker-mid property give a sequence of markers to be rendered along the path, and they are cycled through. The position of each mid marker is controlled by the corresponding value in the marker-position list:

  • corner, which is the initial value for marker-position, gives the current behaviour – it indicates that the marker is to be positioned at the next vertex on the path
  • edge means to position the marker at the next midpoint-of-an-edge
  • a <length> means to advance along the path the given distance and position the marker there

The new value for marker-start and marker-end, auto, means to use the appropriate value from the marker-mid list IF that value's corresponding position from marker-position is corner. (If the corresponding position is edge or a <length>, then it means no marker is painted.) When auto is used for marker-start, it means to use the first value from the marker-mid list, and subsequent mid markers are chosen starting from the second value in the list. When auto is used for marker-end, it means to use the next value from the marker-mid list.

The current marker shorthand property accepts only a single value, which is used to set marker-start, marker-mid and marker-end all to the same value. The extended shorthand proposal here allows setting these individually, as well as the marker-position property. If a start or end clause is missing, they are assumed to be auto. Some examples:


marker: url(#m) —

  • marker-start: auto
  • marker-mid: url(#m)
  • marker-end: auto
  • marker-position: corner

⇒ The #m marker is painted at each vertex of the path, including the start and end.


marker: url(#mm1), url(#mm2) —

  • marker-start: auto
  • marker-mid: url(#mm1), url(#mm2)
  • marker-end: auto
  • marker-position: corner, corner

⇒ The #mm1 marker is painted at the start of the path, then for each subsequent vertex (including the end) it alternates between painting #mm2 and #mm1.


marker: start none, url(#mm1), url(#mm2) —

  • marker-start: auto
  • marker-mid: url(#mm1), url(#mm2)
  • marker-end: auto
  • marker-position: corner, corner

⇒ Nothing is painted at the start of the path, then for each subsequent vertex (including the end) it alternates between painting #mm2 and #mm1.


marker: url(#mm1), 20px url(#mm2), url(#mm3) —

  • marker-start: auto
  • marker-mid: url(#mm1), url(#mm2), url(#mm3)
  • marker-end: auto
  • marker-position: corner, 20px, corner

⇒ #mm1 is painted at the start of the path, then 20px after that #mm2 is painted, then at the following vertex #mm3 is painted, then at the following vertex #mm1 is painted, then 20px after that #mm2 is painted, and so on. The end of the path has either #mm1 or #mm3 painted at it, if either of those would be the next selected marker.


marker: edge url(#mm)

  • marker-start: auto
  • marker-mid: url(#mm)
  • marker-end: auto
  • marker-position: edge

⇒ Nothing is painted at the start and end of the path, and at the midpoint of each edge #mm is painted.


marker: start url(#m), edge url(#m), end url(#m) —

  • marker-start: url(#m)
  • marker-mid: url(#m)
  • marker-end: url(#m)
  • marker-position: edge

⇒ #m is painted at teh start and end of the path as well as at the midpoint of each edge.