1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<svg width="100%" height="100%" viewBox="0 0 480 360"
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-004-ref.svg"/>
<html:meta name="assert" content="Tests marker property."/>
<defs>
<marker id="marker2" markerUnits="strokeWidth" refX="100" refY="100" markerWidth="15" markerHeight="15" viewBox="0 0 200 200">
<rect width="200" height="200" fill="red" stroke="none"/>
</marker>
</defs>
<text font-size="20" x="240" y="28" text-anchor="middle">'marker' attribute test</text>
<!-- There is no marker attribute so no markers should be applied. -->
<g marker="url(#marker2)" fill="gold" stroke="black" fill-rule="evenodd" transform="translate(50,20)">
<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>
|
