Source code
Revision control
Copy as Markdown
Other Tools
SVG Preview (Scaled)
<svg width="500" height="500"
<!--
Verify result of overflow using explicit clip boxes.
Dimensions of shapes in markers are different than in the test so that
the ref will be different to the test when neither overflow nor
clip-path are implemented.
-->
<defs>
<clipPath id="viewBox10x10Clip">
<rect width="10" height="10"/>
</clipPath>
<clipPath id="viewBox8x8Clip">
<rect width="8" height="8"/>
</clipPath>
<marker id="marker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
<rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
</marker>
<marker id="marker2" 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" clip-path="url(#viewBox10x10Clip)"/>
</marker>
<marker id="markerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
<rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
</marker>
<marker id="markerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="visible">
<circle cx="4" cy="4" r="80" fill="green" stroke="none" clip-path="url(#viewBox8x8Clip)"/>
</marker>
<marker id="markerEnd" 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" clip-path="url(#viewBox10x10Clip)"/>
</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="visible">
<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="visible">
<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="visible">
<rect width="15" height="15" fill="purple" stroke="none"/>
<rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
</marker>
<marker id="amarkerMiddle" 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="amarkerEnd" 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="smarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
<rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
</marker>
<marker id="smarker2" 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" clip-path="url(#viewBox10x10Clip)"/>
</marker>
<marker id="smarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
<rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
</marker>
<marker id="smarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="visible">
<circle cx="4" cy="4" r="80" fill="green" stroke="none" clip-path="url(#viewBox8x8Clip)"/>
</marker>
<marker id="smarkerEnd" 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" clip-path="url(#viewBox10x10Clip)"/>
</marker>
<marker id="hmarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
<rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
</marker>
<marker id="hmarker2" 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" clip-path="url(#viewBox10x10Clip)"/>
</marker>
<marker id="hmarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
<rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
</marker>
<marker id="hmarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="visible">
<circle cx="4" cy="4" r="80" fill="green" stroke="none" clip-path="url(#viewBox8x8Clip)"/>
</marker>
<marker id="hmarkerEnd" 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" clip-path="url(#viewBox10x10Clip)"/>
</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>