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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<svg width="300" height="300"
xmlns="http://www.w3.org/2000/svg"
xmlns:html="http://www.w3.org/1999/xhtml">
<!--
Tests the basic support for markers. For the three tests, there should be two
identical paths with markers drawn. The path on the left is rendered using the
marker elements. The path on the right is rendered using the equivalent SVG,
showing what the marked path should look like.
This test is similar to the marker-001.svg test, but has some viewBox
attributes that have a non-zero offset.
The top test examines the basic support for the marker element and style. The
markers are purple rectangles.
The middle test examines the support for the different styles of marker
properties. The "marker-start" property defines the marker to use at the first
vertex of the marked path, in this case a purple rectangle. The "marker-end"
property defines the marker to use at the last vertex of the marked path, in
this case a blue triangle. The "marker-mid" property defines the marker to use
at all vertices, other than the first and last, of the marked path, in this
case a green circle.
The bottom test examines the support for marker orientation along the path
direction. The second vertex, the top right corner of the path, has a marker
that is rotated 45 degrees, since that is the average of the horizontal and
vertical segments each side. The last vertex, the bottom right corner of the
path, has a marker rotated 90 degrees since that is the direction of the last
path segment.
-->
<html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/>
<html:link rel="match" href="marker-006-ref.svg"/>
<html:meta name="assert" content="Support for marker viewBox."/>
<defs>
<!-- Define a few simple marker elements -->
<marker id="marker1" viewBox="20 20 10 10" markerWidth="2" markerHeight="2" refX="25" refY="25" markerUnits="strokeWidth">
<rect x="20" y="20" width="10" height="10" fill="purple" stroke="none"/>
</marker>
<marker id="marker2" viewBox="-5 -5 10 10" markerWidth="2" markerHeight="2" markerUnits="strokeWidth" orient="auto">
<path d="M 0 -5 L 5 5 L -5 5 Z" fill="blue" stroke="none"/>
</marker>
<marker id="markerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
<rect width="10" height="10" fill="purple" stroke="none"/>
</marker>
<marker id="markerMiddle" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
<circle cx="5" cy="5" r="5" fill="green" stroke="none"/>
</marker>
<marker id="markerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
<path d="M 5 0 L 10 10 L 0 10 Z" fill="blue" stroke="none"/>
</marker>
</defs>
<!-- Basic Marker Test -->
<text x="10" y="30" font-size="14">Basic Markers</text>
<path fill="none" stroke="black" stroke-width="16" marker-start="url(#marker1)" marker-mid="url(#marker1)" marker-end="url(#marker1)" d="M 130 40 L 180 40 L 180 90"/>
<!-- Start, Middle and End Marker Test -->
<text x="10" y="115" font-size="14">Start, Middle and End</text>
<path fill="none" stroke="black" stroke-width="16" marker-start="url(#markerStart)" marker-mid="url(#markerMiddle)" marker-end="url(#markerEnd)" d="M 130 135 L 180 135 L 180 185"/>
<!-- Auto Orientation Marker Test -->
<text x="10" y="210" font-size="14">Automatic Orientation</text>
<path fill="none" stroke="black" stroke-width="16" marker-start="url(#marker2)" marker-mid="url(#marker2)" marker-end="url(#marker2)" d="M 130 230 L 180 230 L 180 280"/>
</svg>
|
