| <?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:.5; } |
| ]]></style> |
| |
| <g id="content"> |
| |
| <text class="title" x="50%" y="40">Markers, Orient 1/2</text> |
| |
| <defs> |
| <g id="arrowMarker"> |
| |
| <g stroke="none" > |
| <circle r="3" /> |
| <rect x="-1" y="0" width="2" height="7" /> |
| <path d="M -3 6 l 6 0 l -3 3 z" /> |
| </g> |
| |
| </g> |
| |
| <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> |
| |
| <pattern id="gridPattern" viewBox="-5 -5 10 10" x="-5" y="-5" width="10" height="10" |
| patternContentUnits="userSpaceOnUse" patternUnits="userSpaceOnUse"> |
| <g stroke="rgb(245, 245, 255)" stroke-width="1"> |
| <line x1="0" y1="-6" x2="0" y2="6" /> |
| <line x1="-6" y1="0" x2="6" y2="0" /> |
| </g> |
| </pattern> |
| |
| <!-- ============================= --> |
| <!-- Simple Marker Definition --> |
| <!-- ============================= --> |
| <marker id="startMarker" markerWidth="48" markerHeight="32" |
| viewBox="-10 -3 13 6" orient="auto" refX="0" refY="0" |
| markerUnits="strokeWidth"> |
| <g> |
| <use xlink:href="#arrowMarker" transform="rotate(90)" fill="crimson" /> |
| </g> |
| </marker> |
| |
| <marker id="endMarker" markerWidth="48" markerHeight="24" |
| viewBox="-3 -3 13 6" orient="auto" refX="0" refY="0" |
| markerUnits="strokeWidth"> |
| <g> |
| <use xlink:href="#arrowMarker" transform="rotate(-90)" fill="orange"/> |
| </g> |
| </marker> |
| |
| <marker id="midMarker" markerWidth="64" markerHeight="48" |
| viewBox="-5 -10 10 13" orient="auto" refX="0" refY="0" |
| markerUnits="strokeWidth"> |
| <g> |
| <use xlink:href="#arrowMarker" transform="rotate(180)" fill="gold"/> |
| <line stroke="gold" x1="-5" y1="0" x2="5" y2="0" /> |
| </g> |
| </marker> |
| |
| </defs> |
| |
| <g transform="translate(110, 120)"> |
| |
| <g id="grid" stroke="black" fill="none"> |
| <rect x="-30" y="-25" width="300" height="350" fill="url(markersOrientA.svg#gridPattern)"/> |
| |
| <rect x="-30" y="-45" width="300" height="20" fill="rgb(240, 240, 240)" /> |
| <rect x="-50" y="-25" width="20" height="350" fill="rgb(240, 240, 240)" /> |
| |
| <line x1="70" y1="-45" x2="70" y2="325" /> |
| <line x1="170" y1="-45" x2="170" y2="325" /> |
| <line x1="-50" y1="45" x2="270" y2="45" /> |
| <line x1="-50" y1="115" x2="270" y2="115" /> |
| <line x1="-50" y1="185" x2="270" y2="185" /> |
| <line x1="-50" y1="255" x2="270" y2="255" /> |
| |
| <g class="legend" text-anchor="middle" fill="black" stroke="none"> |
| <text transform="translate(-35, 10) rotate(-90)"> |
| moveTo |
| </text> |
| |
| <text transform="translate(-35, 80) rotate(-90)"> |
| lineTo |
| </text> |
| |
| <text transform="translate(-35, 150) rotate(-90)"> |
| quadTo |
| </text> |
| |
| <text transform="translate(-35, 220) rotate(-90)"> |
| cubicTo |
| </text> |
| |
| <text transform="translate(-35, 290) rotate(-90)"> |
| close |
| </text> |
| </g> |
| </g> |
| |
| <g id="gridLabels" class="legend" text-anchor="middle"> |
| <text x="20" y="-30">start/end</text> |
| <text x="120" y="-30">Middle w/ moveTo</text> |
| <text x="220" y="-30">Middle w/ lineTo</text> |
| |
| </g> |
| |
| <!-- ==================================== --> |
| <!-- The following 6 paths have two --> |
| <!-- points, validating the various --> |
| <!-- possibilities for start and end --> |
| <!-- orientations --> |
| <!-- Start is always a move to --> |
| <!-- ==================================== --> |
| <g marker-start="url(#startMarker)" marker-end="url(#endMarker)" |
| transform="translate(0, 0)" > |
| |
| |
| <!-- End is a moveTo --> |
| <path d="M 0 20 M 30 0" class="markedPath"/> |
| <use xlink:href="#startEndCrossHairs" /> |
| |
| <!-- End is a lineTo --> |
| <g transform="translate(0, 70)"> |
| <path d="M 0 20 L 30 0" class="markedPath" /> |
| <use xlink:href="#startEndCrossHairs" /> |
| </g> |
| |
| <!-- End is a quadTo --> |
| <g transform="translate(0, 140)"> |
| <path d="M 0 20 Q 10 -20 30 0" class="markedPath"/> |
| <use xlink:href="#startEndCrossHairs" /> |
| </g> |
| |
| <!-- End is a cubicTo --> |
| <g transform="translate(0, 210)"> |
| <path d="M 0 20 C 0 -15 20 -15 30 0" class="markedPath"/> |
| <use xlink:href="#startEndCrossHairs" /> |
| </g> |
| |
| <!-- End is a close --> |
| <g transform="translate(0, 280)" > |
| <path d="M 0 20 Z" class="markedPath"/> |
| <use xlink:href="#startEndCrossHairs" /> |
| </g> |
| </g> |
| |
| <!-- ==================================== --> |
| <!-- The following 5 paths have three --> |
| <!-- points, validating the various --> |
| <!-- possibilities for middle orientation --> |
| <!-- when the segment ending on the --> |
| <!-- middle point is a moveTo --> |
| <!-- --> |
| <!-- in : moveTo --> |
| <!-- ==================================== --> |
| <g marker-mid="url(#midMarker)" |
| transform="translate(100, 0)" > |
| |
| |
| <!-- Out is a moveTo --> |
| <path d="M 0 20 L 0 20 M 0 20 M 20 0 M 50 10" class="markedPath"/> |
| <use xlink:href="#startMidEndCrossHairs" /> |
| |
| <!-- Out is a lineTo --> |
| <g transform="translate(0, 70)"> |
| <path d="M 0 20 L 0 20 M 0 20 M 20 0 L 50 10" class="markedPath" /> |
| <use xlink:href="#startMidEndCrossHairs" /> |
| </g> |
| |
| <!-- Out is a quadTo --> |
| <g transform="translate(0, 140)"> |
| <path d="M 0 20 L 0 20 M 0 20 M 20 0 Q 50 -30 50 10" class="markedPath" /> |
| <use xlink:href="#startMidEndCrossHairs" /> |
| </g> |
| |
| <!-- Out is a cubicTo --> |
| <g transform="translate(0, 210)"> |
| <path d="M 0 20 L 0 20 M 0 20 M 20 0 C 40 -10 80 -20 50 10" class="markedPath" /> |
| <use xlink:href="#startMidEndCrossHairs" /> |
| </g> |
| |
| <!-- Out is a close --> |
| <g transform="translate(0, 280)"> |
| <path d="M 0 20 L 0 20 M 0 20 M 20 0 Z" class="markedPath" /> |
| <use xlink:href="#startMidEndCrossHairs" /> |
| </g> |
| |
| </g> |
| |
| <!-- ==================================== --> |
| <!-- The following 5 paths have three --> |
| <!-- points, validating the various --> |
| <!-- possibilities for middle orientation --> |
| <!-- when the segment ending on the --> |
| <!-- middle point is a lineTo --> |
| <!-- --> |
| <!-- in : moveTo --> |
| <!-- ==================================== --> |
| <g marker-mid="url(#midMarker)" |
| transform="translate(200, 0)" > |
| |
| |
| <!-- Out is a moveTo --> |
| <path d="M 0 20 L 20 0 M 50 10" class="markedPath"/> |
| <use xlink:href="#startMidEndCrossHairs" /> |
| |
| <!-- Out is a lineTo --> |
| <g transform="translate(0, 70)"> |
| <path d="M 0 20 L 20 0 L 50 10" class="markedPath" /> |
| <use xlink:href="#startMidEndCrossHairs" /> |
| </g> |
| |
| <!-- Out is a quadTo --> |
| <g transform="translate(0, 140)"> |
| <path d="M 0 20 L 20 0 Q 50 0 50 10" class="markedPath" /> |
| <use xlink:href="#startMidEndCrossHairs" /> |
| </g> |
| |
| <!-- Out is a cubicTo --> |
| <g transform="translate(0, 210)"> |
| <path d="M 0 20 L 20 0 C 40 -10 80 -20 50 10" class="markedPath" /> |
| <use xlink:href="#startMidEndCrossHairs" /> |
| </g> |
| |
| <!-- Out is a close --> |
| <g transform="translate(0, 280)"> |
| <path d="M 0 20 L 20 0 Z" class="markedPath" /> |
| <use xlink:href="#startMidEndCrossHairs" /> |
| </g> |
| |
| </g> |
| </g> |
| </g> |
| |
| <!-- ============================================================= --> |
| <!-- Batik sample mark --> |
| <!-- ============================================================= --> |
| <use xlink:href="../batikLogo.svg#Batik_Tag_Box" /> |
| |
| </svg> |
