| <svg width="500" height="500" |
| xmlns="http://www.w3.org/2000/svg" |
| xmlns:html="http://www.w3.org/1999/xhtml"> |
| <!-- |
| Test all the 'overflow' property values except 'inherit' on the 'marker' element. |
| |
| Each column tests a value of the 'overflow' property. |
| The first row uses the 'marker' property to set the same marker on start-, mid- and end-points on the path. |
| The second row uses 'marker-start', 'marker-mid' and 'marker-end' to give each point its own marker. |
| The third row uses the 'marker' property like the first row, but here the marker has orient="auto" set. |
| --> |
| <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/> |
| <html:link rel="match" href="marker-005-ref.svg"/> |
| <html:meta name="assert" content="Test all the 'overflow' property values except 'inherit' on the 'marker' element."/> |
| <defs> |
| <marker id="marker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth"> |
| <rect width="15" height="15" fill="purple" stroke="none"/> |
| </marker> |
| <marker id="marker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto"> |
| <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/> |
| </marker> |
| <marker id="markerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth"> |
| <rect width="15" height="15" fill="purple" stroke="none"/> |
| </marker> |
| <marker id="markerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth"> |
| <circle cx="4" cy="4" r="8" fill="green" stroke="none"/> |
| </marker> |
| <marker id="markerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth"> |
| <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/> |
| </marker> |
| |
| <marker id="vmarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible"> |
| <rect width="15" height="15" fill="purple" stroke="none"/> |
| </marker> |
| <marker id="vmarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="visible"> |
| <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/> |
| </marker> |
| <marker id="vmarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible"> |
| <rect width="15" height="15" fill="purple" stroke="none"/> |
| </marker> |
| <marker id="vmarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="visible"> |
| <circle cx="4" cy="4" r="8" fill="green" stroke="none"/> |
| </marker> |
| <marker id="vmarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="visible"> |
| <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/> |
| </marker> |
| |
| <marker id="amarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="auto"> |
| <rect width="15" height="15" fill="purple" stroke="none"/> |
| </marker> |
| <marker id="amarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="auto"> |
| <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/> |
| </marker> |
| <marker id="amarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="auto"> |
| <rect width="15" height="15" fill="purple" stroke="none"/> |
| </marker> |
| <marker id="amarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="auto"> |
| <circle cx="4" cy="4" r="8" fill="green" stroke="none"/> |
| </marker> |
| <marker id="amarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="auto"> |
| <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/> |
| </marker> |
| |
| <marker id="smarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="scroll"> |
| <rect width="15" height="15" fill="purple" stroke="none"/> |
| </marker> |
| <marker id="smarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="scroll"> |
| <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/> |
| </marker> |
| <marker id="smarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="scroll"> |
| <rect width="15" height="15" fill="purple" stroke="none"/> |
| </marker> |
| <marker id="smarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="scroll"> |
| <circle cx="4" cy="4" r="8" fill="green" stroke="none"/> |
| </marker> |
| <marker id="smarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="scroll"> |
| <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/> |
| </marker> |
| |
| <marker id="hmarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="hidden"> |
| <rect width="15" height="15" fill="purple" stroke="none"/> |
| </marker> |
| <marker id="hmarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="hidden"> |
| <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/> |
| </marker> |
| <marker id="hmarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="hidden"> |
| <rect width="15" height="15" fill="purple" stroke="none"/> |
| </marker> |
| <marker id="hmarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="hidden"> |
| <circle cx="4" cy="4" r="8" fill="green" stroke="none"/> |
| </marker> |
| <marker id="hmarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="hidden"> |
| <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/> |
| </marker> |
| </defs> |
| |
| <style type="text/css"> |
| .testpaths { |
| fill:none; |
| stroke:black; |
| stroke-width:8px; |
| } |
| |
| /* no overflow specified */ |
| #p1 { marker: url(#marker1); } |
| #p2 { |
| marker-start: url(#markerStart); |
| marker-mid:url(#markerMiddle); |
| marker-end: url(#markerEnd); |
| } |
| #p3 { marker: url(#marker2); } |
| |
| /* overflow = visible */ |
| #p4 { marker: url(#vmarker1); } |
| #p5 { |
| marker-start: url(#vmarkerStart); |
| marker-mid:url(#vmarkerMiddle); |
| marker-end: url(#vmarkerEnd); |
| } |
| #p6 { marker: url(#vmarker2); } |
| |
| /* overflow = auto */ |
| #p7 { marker: url(#amarker1); } |
| #p8 { |
| marker-start: url(#amarkerStart); |
| marker-mid:url(#amarkerMiddle); |
| marker-end: url(#amarkerEnd); |
| } |
| #p9 { marker: url(#amarker2); } |
| |
| /* overflow = scroll */ |
| #p10 { marker: url(#smarker1); } |
| #p11 { |
| marker-start: url(#smarkerStart); |
| marker-mid:url(#smarkerMiddle); |
| marker-end: url(#smarkerEnd); |
| } |
| #p12 { marker: url(#smarker2); } |
| |
| /* overflow = hidden */ |
| #p13 { marker: url(#hmarker1); } |
| #p14 { |
| marker-start: url(#hmarkerStart); |
| marker-mid:url(#hmarkerMiddle); |
| marker-end: url(#hmarkerEnd); |
| } |
| #p15 { marker: url(#hmarker2); } |
| </style> |
| |
| <text x="50%" y="3em" style="font: 18px; text-anchor:middle;">Test marker overflow</text> |
| |
| <g style="font: 14px; text-anchor:middle" transform="translate(0,280)"> |
| <text x="60">default</text> |
| <text x="155">'visible'</text> |
| <text x="245">'auto'</text> |
| <text x="340">'scroll'</text> |
| <text x="430">'hidden'</text> |
| </g> |
| |
| <g transform="translate(-30,75)"> |
| <g id="subtest1" transform="scale(0.6)"> |
| <path id="p1" class="testpaths" d="M 130 40 L 180 40 L 180 90"/> |
| <path id="p2" class="testpaths" d="M 130 135 L 180 135 L 180 185"/> |
| <path id="p3" class="testpaths" d="M 130 230 L 180 230 L 180 280"/> |
| </g> |
| |
| <g id="subtest2" transform="scale(0.6) translate(150,0)"> |
| <path id="p4" class="testpaths" d="M 130 40 L 180 40 L 180 90"/> |
| <path id="p5" class="testpaths" d="M 130 135 L 180 135 L 180 185"/> |
| <path id="p6" class="testpaths" d="M 130 230 L 180 230 L 180 280"/> |
| </g> |
| |
| <g id="subtest3" transform="scale(0.6) translate(300,0)"> |
| <path id="p7" class="testpaths" d="M 130 40 L 180 40 L 180 90"/> |
| <path id="p8" class="testpaths" d="M 130 135 L 180 135 L 180 185"/> |
| <path id="p9" class="testpaths" d="M 130 230 L 180 230 L 180 280"/> |
| </g> |
| |
| <g id="subtest4" transform="scale(0.6) translate(450,0)"> |
| <path id="p10" class="testpaths" d="M 130 40 L 180 40 L 180 90"/> |
| <path id="p11" class="testpaths" d="M 130 135 L 180 135 L 180 185"/> |
| <path id="p12" class="testpaths" d="M 130 230 L 180 230 L 180 280"/> |
| </g> |
| |
| <g id="subtest5" transform="scale(0.6) translate(600,0)"> |
| <path id="p13" class="testpaths" d="M 130 40 L 180 40 L 180 90"/> |
| <path id="p14" class="testpaths" d="M 130 135 L 180 135 L 180 185"/> |
| <path id="p15" class="testpaths" d="M 130 230 L 180 230 L 180 280"/> |
| </g> |
| </g> |
| </svg> |
