2 Any copyright is dedicated to the Public Domain.
3 http://creativecommons.org/publicdomain/zero/1.0/
5 <svg xmlns=
"http://www.w3.org/2000/svg">
6 <title>Test that marker orientation is correct at the end of arcs
</title>
7 <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=769115 -->
9 <marker id=
"m1" markerWidth=
"40" markerHeight=
"40" refX=
"20" refY=
"20"
10 markerUnits=
"userSpaceOnUse" orient=
"auto" fill=
"blue">
11 <rect x=
"5" y=
"15" width=
"22" height=
"10"/>
12 <path d=
"M 25,10 35,20 25,30 z"/>
15 <marker id=
"m2" markerWidth=
"40" markerHeight=
"40" refX=
"20" refY=
"20"
16 markerUnits=
"userSpaceOnUse" orient=
"auto" fill=
"red">
17 <rect x=
"5" y=
"15" width=
"22" height=
"10"/>
18 <path d=
"M 25,10 35,20 25,30 z"/>
22 <!-- arcs that go from the left of the circle to... -->
23 <g marker-end=
"url(#m2)">
24 <!-- ...90 degrees anti-clockwise -->
25 <path d=
"M100,100 A 50,50 0 1 0 150,50" marker-start=
"url(#m1)"/>
26 <!-- ...180 degrees anti-clockwise -->
27 <path d=
"M100,100 A 50,50 0 0 0 200,100"/>
28 <!-- ...270 degrees anti-clockwise -->
29 <path d=
"M100,100 A 50,50 0 0 0 150,150"/>
32 <!-- arcs that go from the left of the circle to... -->
33 <g marker-end=
"url(#m2)" transform=
"translate(250,0)">
34 <!-- ...90 degrees clockwise -->
35 <path d=
"M100,100 A 50,50 0 0 1 150,50" marker-start=
"url(#m1)"/>
36 <!-- ...180 degrees clockwise -->
37 <path d=
"M100,100 A 50,50 0 1 1 200,100"/>
38 <!-- ...270 degrees clockwise -->
39 <path d=
"M100,100 A 50,50 0 1 1 150,150"/>
42 <!-- arcs that go from the right of the circle to... -->
43 <g marker-end=
"url(#m2)" transform=
"translate(0,250)">
44 <!-- ...90 degrees anti-clockwise -->
45 <path d=
"M200,100 A 50,50 0 0 1 150,150" marker-start=
"url(#m1)"/>
46 <!-- ...180 degrees anti-clockwise -->
47 <path d=
"M200,100 A 50,50 0 0 1 100,100"/>
48 <!-- ...270 degrees anti-clockwise -->
49 <path d=
"M200,100 A 50,50 0 1 1 150,50"/>
52 <!-- arcs that go from the right of the circle to... -->
53 <g marker-end=
"url(#m2)" transform=
"translate(250,250)">
54 <!-- ...90 degrees anti-clockwise -->
55 <path d=
"M200,100 A 50,50 0 0 0 150,50" marker-start=
"url(#m1)"/>
56 <!-- ...180 degrees anti-clockwise -->
57 <path d=
"M200,100 A 50,50 0 1 0 100,100"/>
58 <!-- ...270 degrees anti-clockwise -->
59 <path d=
"M200,100 A 50,50 0 1 0 150,150"/>