samples/tests/markersOrientB.svg

<?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 2/2</text>

        <g transform="translate(110, 120)">

        <use xlink:href="markersOrientA.svg#grid" />

        <g class="legend" stroke="none" fill="black" text-anchor="middle" >
            <text x="20" y="-30">Middle w/quadTo</text>
            <text x="120" y="-30">Middle w/ cubicTo</text>
            <text x="220" y="-30">Middle w/ close</text>
        </g>

        <!-- ==================================== -->
        <!-- The following 5 paths have two       -->
        <!-- points, validating the various       -->
        <!-- possibilities for middle orientation -->
        <!-- when the segment ending on the       -->
        <!-- middle point is a qadTo              -->
        <!--                                      -->
        <!-- in : quadTo                          -->
        <!-- ==================================== -->
        <g marker-mid="url(markersOrientA.svg#midMarker)"
           transform="translate(0, 0)"  >


            <!-- Out is a moveTo -->
            <path d="M 0 20 Q 40 40 20 0 M 50 10" class="markedPath"/>
            <use xlink:href="markersOrientA.svg#startMidEndCrossHairs" />

            <!-- Out is a lineTo -->
            <g transform="translate(0, 70)">
                <path d="M 0 20 Q 20 20 20 0 L 50 10" class="markedPath" />
                <use xlink:href="markersOrientA.svg#startMidEndCrossHairs" />
            </g>

            <!-- Out is a quadTo -->
            <g transform="translate(0, 140)">
                <path d="M 0 20 Q 20 20 20 0 Q 50 0 50 10" class="markedPath" />
                <use xlink:href="markersOrientA.svg#startMidEndCrossHairs" />
            </g>

            <!-- Out is a cubicTo -->
            <g transform="translate(0, 210)">
                <path d="M 0 20 Q 20 20 20 0 C 40 -10 80 -20 50 10" class="markedPath" />
                <use xlink:href="markersOrientA.svg#startMidEndCrossHairs" />
            </g>

            <!-- Out is a close -->
            <g transform="translate(0, 280)">
                <path d="M 0 20 Q 20 20 20 0 Z" class="markedPath" />
                <use xlink:href="markersOrientA.svg#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 cubicTo            -->
        <!--                                      -->
        <!-- in : cubicTo                         -->
        <!-- ==================================== -->
        <g marker-mid="url(markersOrientA.svg#midMarker)"
           transform="translate(100, 0)"  >


            <!-- Out is a moveTo -->
            <path d="M 0 20 C 20 40 40 20 20 0 M 50 10" class="markedPath"/>
            <use xlink:href="markersOrientA.svg#startMidEndCrossHairs" />

            <!-- Out is a lineTo -->
            <g transform="translate(0, 70)">
                <path d="M 0 20 C 20 40 40 20 20 0 L 50 10" class="markedPath" />
                <use xlink:href="markersOrientA.svg#startMidEndCrossHairs" />
            </g>

            <!-- Out is a quadTo -->
            <g transform="translate(0, 140)">
                <path d="M 0 20 C 20 40 40 20 20 0 Q 50 0 50 10" class="markedPath" />
                <use xlink:href="markersOrientA.svg#startMidEndCrossHairs" />
            </g>

            <!-- Out is a cubicTo -->
            <g transform="translate(0, 210)">
                <path d="M 0 20 C 20 40 40 20 20 0 C 40 -10 80 -20 50 10" class="markedPath" />
                <use xlink:href="markersOrientA.svg#startMidEndCrossHairs" />
            </g>

            <!-- Out is a close -->
            <g transform="translate(0, 280)">
                <path d="M 0 20 C 20 40 40 20 20 0 Z" class="markedPath" />
                <use xlink:href="markersOrientA.svg#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 close              -->
        <!--                                      -->
        <!-- in : close                           -->
        <!-- ==================================== -->
        <g marker-mid="url(markersOrientA.svg#midMarker)"
           transform="translate(200, 0)"  >


            <!-- Out is a moveTo -->
            <path d="M 0 20 Z M 50 10" class="markedPath"/>
            <use xlink:href="markersOrientA.svg#startMidEndCrossHairs" />

            <!-- Out is a lineTo -->
            <g transform="translate(0, 70)">
                <path d="M 0 20 Z L 50 10" class="markedPath" />
                <use xlink:href="markersOrientA.svg#startMidEndCrossHairs" />
            </g>

            <!-- Out is a quadTo -->
            <g transform="translate(0, 140)">
                <path d="M 0 20 Z Q 70 -30 50 10" class="markedPath" />
                <use xlink:href="markersOrientA.svg#startMidEndCrossHairs" />
            </g>

            <!-- Out is a cubicTo -->
            <g transform="translate(0, 210)">
                <path d="M 0 20 Z C 40 -10 80 -20 50 10" class="markedPath" />
                <use xlink:href="markersOrientA.svg#startMidEndCrossHairs" />
            </g>

            <!-- Out is a close : NA -->
            <!-- 
            <g transform="translate(0, 280)">
                <path d="M 0 20 Z Z" class="markedPath" />
                <use xlink:href="markersOrientA.svg#startMidEndCrossHairs" />
            </g>
            -->
        </g>
        </g>
    </g>

    <!-- ============================================================= -->
    <!-- Batik sample mark                                             -->
    <!-- ============================================================= -->
    <use xlink:href="../batikLogo.svg#Batik_Tag_Box" />

</svg>