blob: fd8d9916db3a3590fce1b958478fb4acb8acbc9f [file] [log] [blame]
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
"http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<!-- ========================================================================= -->
<!-- Copyright (C) The Apache Software Foundation. All rights reserved. -->
<!-- -->
<!-- This software is published under the terms of the Apache Software License -->
<!-- version 1.1, a copy of which has been included with this distribution in -->
<!-- the LICENSE file. -->
<!-- ========================================================================= -->
<!-- ========================================================================= -->
<!-- This test validates handling of the orient property on maker-start and -->
<!-- marker-end. -->
<!-- -->
<!-- @author vhardy@apache.org -->
<!-- @version $Id$ -->
<!-- ========================================================================= -->
<?xml-stylesheet type="text/css" href="test.css" ?>
<svg id="body" width="450" height="500" viewBox="0 0 450 500">
<title>Marker Test</title>
<style type="text/css"><![CDATA[
.markedPath { fill:none; stroke:black; stroke-width:4; }
]]></style>
<g id="content">
<g transform="translate(0, 40)">
<text class="title" x="50%" y="0">Markers, Ref Point, Overflow</text>
<text class="title" x="50%" y="1em">markerUnits &amp; viewBox</text>
</g>
<defs>
<g id="crossHair" marker="none" marker-start="none" marker-end="none" marker-mid="none" stroke="black">
<line y1="-5" x2="0" y2="5" />
<line x1="-5" x2="5" y2="0" />
</g>
<g id="startEndCrossHairs">
<use x="0" y="20" xlink:href="#crossHair" />
<use x="30" y="0" xlink:href="#crossHair" />
</g>
<g id="startMidEndCrossHairs">
<use x="0" y="20" xlink:href="#crossHair" />
<use x="20" y="0" xlink:href="#crossHair" />
<use x="50" y="10" xlink:href="#crossHair" />
</g>
<path id="testPath" d="M 0 0 l 60 0 l 60 0" />
<g id="testPathCrossHairs">
<use xlink:href="#crossHair" />
<use x="60" xlink:href="#crossHair" />
<use x="120" xlink:href="#crossHair" />
</g>
<g id="markerContent" fill="none" stroke="none">
<circle r="1.8" stroke="black" fill="crimson" stroke-width=".4" />
<path d="M 0 -1.8 L 0.3 -0.3 L 1.8 0 L 0.3 0.3 L 0 1.8 L -.2 0.3 L -1.8 0 L -0.3 -0.3 Z"
fill="yellow" stroke="none" />
</g>
<!-- ============================= -->
<!-- Simple Marker Definition -->
<!-- ============================= -->
<marker id="markerTopRef" markerWidth="8" markerHeight="8"
viewBox="-2 -2 4 4" orient="0" refX="-1" refY="-1"
markerUnits="strokeWidth" overflow="hidden">
<g>
<use xlink:href="#markerContent" />
<circle fill="white" stroke="none" cx="-1" cy="-1" r=".4" />
</g>
</marker>
<marker id="markerCenterRef" markerWidth="8" markerHeight="8"
viewBox="-2 -2 4 4" orient="0" refX="0" refY="0"
markerUnits="strokeWidth" overflow="hidden">
<g>
<use xlink:href="#markerContent" />
<circle fill="white" stroke="none" cx="0" cy="0" r=".4" />
</g>
</marker>
<marker id="markerBottomRef" markerWidth="8" markerHeight="8"
viewBox="-2 -2 4 4" orient="0" refX="1" refY="1"
markerUnits="strokeWidth" overflow="hidden">
<g>
<use xlink:href="#markerContent" />
<circle fill="white" stroke="none" cx="1" cy="1" r=".4" />
</g>
</marker>
<marker id="markerHidden" markerWidth="20" markerHeight="20"
viewBox="-1 -1 2 2" orient="0" refX="0" refY="0"
markerUnits="strokeWidth" overflow="hidden">
<g>
<use xlink:href="#markerContent" />
<rect fill="none" stroke="black" stroke-width="0.1" x="-0.95" y="-0.95" width="1.9" height="1.9" />
</g>
</marker>
<marker id="markerOverflow" markerWidth="20" markerHeight="20"
viewBox="-1 -1 2 2" orient="0" refX="0" refY="0"
markerUnits="strokeWidth" overflow="visible">
<g>
<use xlink:href="#markerContent" />
<rect fill="none" stroke="white" stroke-width="0.1" x="-1" y="-1" width="2" height="2" />
</g>
</marker>
<marker id="markerViewBoxTopLeft" markerWidth="20" markerHeight="20"
viewBox="-2 -2 2 2" orient="0" refX="0" refY="0"
markerUnits="strokeWidth" overflow="hidden">
<g>
<use xlink:href="#markerContent" />
<rect x="-1.95" y="-1.95" width="1.9" height="1.9" stroke-width="0.1" stroke="black" fill="none"/>
</g>
</marker>
<marker id="markerViewBoxBottomRight" markerWidth="20" markerHeight="20"
viewBox="0 0 2 2" orient="0" refX="0" refY="0"
markerUnits="strokeWidth" overflow="hidden">
<g>
<use xlink:href="#markerContent" />
<rect x=".05" y=".05" width="1.9" height="1.9" stroke-width="0.1" stroke="black" fill="none"/>
</g>
</marker>
<marker id="markerViewBoxCenterSlice" markerWidth="20" markerHeight="40"
viewBox="-1 -2 2 4" orient="0" refX="0" refY="0"
markerUnits="strokeWidth" overflow="hidden">
<g>
<use xlink:href="#markerContent" />
<rect x="-.95" y="-1.95" width="1.9" height="3.9" stroke-width="0.1" stroke="black" fill="none"/>
</g>
</marker>
<marker id="markerStrokeWidth" markerWidth="40" markerHeight="40"
viewBox="-1 -1 2 2" orient="0" refX="0" refY="0"
markerUnits="strokeWidth" overflow="visible">
<g>
<use xlink:href="#markerContent" />
</g>
</marker>
<marker id="markerUserSpace" markerWidth="20" markerHeight="20"
viewBox="-1 -1 2 2" orient="0" refX="0" refY="0"
markerUnits="userSpaceOnUse" overflow="visible">
<g>
<use xlink:href="#markerContent" />
</g>
</marker>
</defs>
<g transform="translate(50, 140)">
<!-- ==================================== -->
<!-- Simply test the various settings for -->
<!-- the refX and refY attributes -->
<!-- ==================================== -->
<g transform="translate(0, 0)" >
<!-- Top reference point -->
<use xlink:href="#testPath"
marker-start="url(#markerBottomRef)"
marker-mid="url(#markerCenterRef)"
marker-end="url(#markerTopRef)"
class="markedPath"/>
<use xlink:href="#testPathCrossHairs" />
<g class="label" transform="translate(60, 50)" text-anchor="middle">
<text y="0">Various values for refX/refY </text>
<text y="14">start, middle and end</text>
</g>
</g>
<!-- ==================================== -->
<!-- Test the various settings for the -->
<!-- overflow property -->
<!-- ==================================== -->
<g transform="translate(0, 140)" >
<!-- Top reference point -->
<use xlink:href="#testPath"
marker="url(#markerHidden)"
style="stroke-width:1; stroke:crimson"/>
<use xlink:href="#testPathCrossHairs" />
<use y="70" xlink:href="#testPath"
marker="url(#markerOverflow)"
style="stroke-width:1; stroke:crimson"/>
<use y="70" xlink:href="#testPathCrossHairs" />
<g class="label" transform="translate(60, 90)" text-anchor="middle">
<text y="-110">overflow="hidden"</text>
<text y="-50">overflow="visible"</text>
<text y="30">Various values for the </text>
<text y="44">overflow property</text>
</g>
</g>
<!-- ==================================== -->
<!-- Test the various settings for the -->
<!-- viewBox property -->
<!-- ==================================== -->
<g transform="translate(225, 0)" >
<!-- Top reference point -->
<use xlink:href="#testPath"
marker-start="url(#markerViewBoxTopLeft)"
marker-end="url(#markerViewBoxBottomRight)"
marker-mid="url(#markerViewBoxCenterSlice)"
style="stroke-width:1; stroke:crimson"/>
<use xlink:href="#testPathCrossHairs" />
<g class="label" transform="translate(60, 50)" text-anchor="middle">
<text y="0">Various values for the </text>
<text y="14">viewBox property</text>
</g>
</g>
<!-- ==================================== -->
<!-- Test the various settings for the -->
<!-- markerUnits property -->
<!-- ==================================== -->
<g transform="translate(225, 140)" >
<!-- Top reference point -->
<use xlink:href="#testPath"
marker="url(#markerStrokeWidth)"
style="stroke-width:.5; stroke:crimson"/>
<use xlink:href="#testPathCrossHairs" />
<use y="70" xlink:href="#testPath"
marker="url(#markerUserSpace)"
style="stroke-width:.5; stroke:crimson"/>
<use y="70" xlink:href="#testPathCrossHairs" />
<g class="label" transform="translate(60, 90)" text-anchor="middle">
<text y="-115">markerUnits="strokeWidth"</text>
<text y="-45">markerUnits="userSpaceOnUse"</text>
<text y="30">Various values for the </text>
<text y="44">markerUnits property</text>
</g>
</g>
</g>
</g>
<!-- ============================================================= -->
<!-- Batik sample mark -->
<!-- ============================================================= -->
<use xlink:href="../batikLogo.svg#Batik_Tag_Box" />
</svg>