`-=[]โจโฉ\;',./~!@#$%^&*()_+{}|:"<>? ๐๐๐๐๐๐๐โ๐๐๐๐๐๐๐๐๐๐๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง
ร
โโโรโโ
โยฑโ๊๏นฆโโ โฏ ๐ธ๐นโ๐ป๐ผ๐ฝ๐พโ๐๐๐๐๐โ๐โโโ๐๐๐๐๐๐๐โค๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ๐๐๐๐๐๐
๐๐๐๐๐๐๐๐
โผโฝโพโโโโโ
โโโโโโโ โก โคโฅโฆโงโจโฉโชโซ
โโโโโโ โโโโ
โโ ๐ผ๐ฝ๐พ๐ฟ๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐
โโโโ
โฆฐโโโโโโดโต โโโโโโโ โงโจโฉโช
โซโฌโญโฎโฏโฐโฑโฒโณ โฅโฎโฏโฐโฑ โ โฒ โณ โด โ โ สน สบ โต โถ โท
๏น ๏น ๏น ๏น ๏ธน ๏ธบ ๏ธป ๏ธผ ๏ธ ๏ธ ๏ธฟ ๏น ๏ธฝ ๏ธพ ๏น ๏น ๏ธท ๏ธธ โ โ โด โต โ โ โ โก
โโโโโคโฆโฅโงโโโโโโโฒโผโโถโบโปโฒโณ โผโฝโพโฟโโโโโโ
โโ โโโโโโโโโโโโโโโณโฅขโฅฃโฅคโฅฅโฅฆโฅงโฅจโฅฉโฅชโฅซโฅฌโฅญโฅฎโฅฏ
Draft for Information Only
Content
<marker> โExample โAttributes โโGlobal attributes โUsage notes โSpecifications โSources and References
<marker>
SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg style='border:1px solid black' width='480' height='450' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<svg width='426' height='426' viewBox='-25, -25, 426, 426' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
<path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
</pattern>
<pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
<rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
<path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
</pattern>
<rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
<svg transform='scale(0.938967136150235)' preserveAspectRatio='xMinYMin' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
<defs>
<!-- arrowhead marker definition -->
<marker id='arrow' viewBox='0 0 10 10' refX='5' refY='5'
markerWidth='6' markerHeight='6'
orient='auto-start-reverse'>
<path d='M 0 0 L 10 5 L 0 10 z' />
</marker>
<!-- simple dot marker definition -->
<marker id='dot' viewBox='0 0 10 10' refX='5' refY='5'
markerWidth='5' markerHeight='5'>
<circle cx='5' cy='5' r='5' fill='red' />
</marker>
</defs>
<!-- Coordinate axes with a arrowhead in both direction -->
<polyline points='10,10 10,90 90,90' fill='none' stroke='black'
marker-start='url(#arrow)' marker-end='url(#arrow)' />
<!-- Data line with polymarkers -->
<polyline points='15,80 29,50 43,60 57,30 71,40 85,15' fill='none' stroke='grey'
marker-start='url(#dot)' marker-mid='url(#dot)' marker-end='url(#dot)' />
</svg>
</svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='395' y='17' font-size='20'>(100,0)</text>
<text x='5' y='445' font-size='20'>(0,100)</text>
<text x='395' y='445' font-size='20'>(100,100)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='425' cy='25' r='2' fill='black'/>
<circle cx='25' cy='425' r='2' fill='black'/>
<circle cx='425' cy='425' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:
markerHeight
This attribute defines the height of the marker viewport. Value type : <length> ; Default value : 3 ; Animatable : yes
markerUnits
This attribute defines the coordinate system for the attributes markerWidth , markerHeight and the contents of the <marker> . Value type : userSpaceOnUse |strokeWidth ; Default value : strokeWidth ; Animatable : yes
markerWidth
This attribute defines the width of the marker viewport. Value type : <length> ; Default value : 3 ; Animatable : yes
orient
This attribute defines the orientation of the marker relative to the shape it is attached to. Value type : auto |auto-start-reverse |<angle> ; Default value : 0 ; Animatable : yes
preserveAspectRatio
This attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. Value type : (none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax ) (meet |slice )? ; Default value : xMidYMid meet ; Animatable : yes
refX
This attribute defines the x coordinate for the reference point of the marker. Value type : left |center |right |<coordinate> ; Default value : 0 ; Animatable : yes
refY
This attribute defines the y coordinate for the reference point of the marker. Value type : top |center |bottom |<coordinate> ; Default value : 0 ; Animatable : yes
viewBox
This attribute defines the bound of the SVG viewport for the current SVG fragment. Value type : <list-of-numbers> ; Default value : none; Animatable : yes
Core Attributes
Most notably: id , tabindex
Styling Attributes
class , style
Conditional Processing Attributes
Most notably: requiredExtensions , systemLanguage
Presentation Attributes
Most notably: clip-path , clip-rule , color , color-interpolation , color-rendering , cursor , display , fill , fill-opacity , fill-rule , filter , mask , opacity , pointer-events , shape-rendering , stroke , stroke-dasharray , stroke-dashoffset , stroke-linecap , stroke-linejoin , stroke-miterlimit , stroke-opacity , stroke-width , transform , vector-effect , visibility
ARIA Attributes
aria-activedescendant , aria-atomic , aria-autocomplete , aria-busy , aria-checked , aria-colcount , aria-colindex , aria-colspan , aria-controls , aria-current , aria-describedby , aria-details , aria-disabled , aria-dropeffect , aria-errormessage , aria-expanded , aria-flowto , aria-grabbed , aria-haspopup , aria-hidden , aria-invalid , aria-keyshortcuts , aria-label , aria-labelledby , aria-level , aria-live , aria-modal , aria-multiline , aria-multiselectable , aria-orientation , aria-owns , aria-placeholder , aria-posinset , aria-pressed , aria-readonly , aria-relevant , aria-required , aria-roledescription , aria-rowcount , aria-rowindex , aria-rowspan , aria-selected , aria-setsize , aria-sort , aria-valuemax , aria-valuemin , aria-valuenow , aria-valuetext , role
Categories
Container element
Permitted content
Any number of the following elements, in any order:
Animation elements
Descriptive elements
Shape elements
Structural elements
Gradient elements
<a> , <altGlyphDef> , <clipPath> , <color-profile> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> ,
<image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view>
Specification
Scalable Vector Graphics (SVG) 1.1 (Second Edition) (SVG)
Sources and References
https://www.w3.org/TR/SVG2/painting.html#MarkerElement
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a
ยฉsideway
ID: 220100015 Last Updated: 1/15/2022 Revision: 0 Ref:
References
http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999