| <svg width="500" height="500" |
| xmlns="http://www.w3.org/2000/svg" |
| xmlns:html="http://www.w3.org/1999/xhtml"> |
| <!-- |
| The SVG specification defines three properties to reference markers: marker-start, marker-mid, |
| marker-end. It also provides a shorthand property,marker. Using the marker property from a style sheet |
| is equivalent to using all three (start, mid, end). However, shorthand properties cannot be used as presentation attributes. |
| --> |
| <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/> |
| <html:link rel="match" href="marker-003-ref.svg"/> |
| <html:meta name="assert" content="Tests marker property."/> |
| <defs> |
| <marker id="marker1" markerUnits="strokeWidth" refX="50" refY="50" markerWidth="5" markerHeight="5" viewBox="0 0 100 100"> |
| <rect width="100" height="100" fill="royalblue" stroke="none"/> |
| </marker> |
| <style type="text/css"> |
| #markme { marker: url(#marker1) } |
| </style> |
| </defs> |
| |
| <text font-size="20" x="240" y="28" text-anchor="middle">'marker' property test</text> |
| <g fill="gold" stroke="black" fill-rule="evenodd" transform="translate(50,20)" id="markme"> |
| <path d="M10,60 Q90,60 90,140 Q10,140 10,60 Z M10,140 Q10,60 90,60 Q90,140 10,140 Z M50,70 L80,100 50,130 20,100 Z"/> |
| <polygon points="100,60 120,140 140,60 160,140 180,60 180,100 100,100"/> |
| <polyline points="190,60 210,140 230,60 250,140 270,60 270,100 190,100"/> |
| <line x1="280" x2="370" y1="60" y2="140"/> |
| <line x1="370" x2="280" y1="60" y2="140"/> |
| </g> |
| </svg> |
