Proposals/Non-interactive marker improvements
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 ] ]? | | |
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.