| <?xml version="1.0" standalone="no"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" |
| "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> |
| |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <!-- ========================================================================= --> |
| <!-- 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="../../resources/style/test.css" ?> |
| |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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" style="marker: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> |