samples/tests/spec/scripting/path_pathSegList_create.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">

<!--

   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.

-->
<!-- ====================================================================== -->
<!-- Modification of a path attributes                                      -->
<!--                                                                        -->
<!-- @author nicolas.socheleau@bitflash.com-->
<!-- @version $Id$ -->
<!-- ====================================================================== -->
<?xml-stylesheet type="text/css" href="../../resources/style/test.css"      ?>
<svg id="body" width="450" height="500" viewBox="0 0 450 500">
    <title>&lt;path&gt; attributes 'onload'</title>

    <text text-anchor="middle" x="50%" y="25" class="title">&lt;path&gt; getPathSegList() 
in 'onload'</text>

    <script type="text/ecmascript">
        var SVGNS = "http://www.w3.org/2000/svg";
    function moveclose(evt) {
        var elt = evt.target;
        var doc = elt.getOwnerDocument();

        var path = doc.createElementNS(SVGNS,"path");
        //alert(path);

        var seg = path.pathSegList;
        //alert(seg);
        //d="M50 50 L100 50 L100 60 L50 60 z m15 20 l20 0 l0 -30 l-20 0 z"
        segment = path.createSVGPathSegMovetoAbs(50,50);
        //alert(segment);
        seg.appendItem(segment);
        seg.appendItem(path.createSVGPathSegLinetoAbs(100,50));
        seg.appendItem(path.createSVGPathSegLinetoAbs(100,60));
        seg.appendItem(path.createSVGPathSegLinetoAbs(50,60));
        seg.appendItem(path.createSVGPathSegClosePath());

        seg.appendItem(path.createSVGPathSegMovetoRel(15,20));
        seg.appendItem(path.createSVGPathSegLinetoRel(20,0));
        seg.appendItem(path.createSVGPathSegLinetoRel(0,-30));
        seg.appendItem(path.createSVGPathSegLinetoRel(-20,0));
        seg.appendItem(path.createSVGPathSegClosePath());

        elt.insertBefore(path, elt.getFirstChild());
    }

    function horizonvertic(evt) {
        var elt = evt.target;
        var doc = elt.getOwnerDocument();

        var path = doc.createElementNS(SVGNS,"path");

        var seg = path.getPathSegList();
        //d="M50 50 H100 V60 H50 z m15 20 h20 v-30 h-20 z"
        seg.appendItem(path.createSVGPathSegMovetoAbs(50,50));
        seg.appendItem(path.createSVGPathSegLinetoHorizontalAbs(100));
        seg.appendItem(path.createSVGPathSegLinetoVerticalAbs(60));
        seg.appendItem(path.createSVGPathSegLinetoHorizontalAbs(50));
        seg.appendItem(path.createSVGPathSegClosePath());

        seg.appendItem(path.createSVGPathSegMovetoRel(15,20));
        seg.appendItem(path.createSVGPathSegLinetoHorizontalRel(20));
        seg.appendItem(path.createSVGPathSegLinetoVerticalRel(-30));
        seg.appendItem(path.createSVGPathSegLinetoHorizontalRel(-20));
        seg.appendItem(path.createSVGPathSegClosePath());

        elt.insertBefore(path, elt.getFirstChild());
    }

    function cubic(evt) {
        var elt = evt.target;
        var doc = elt.getOwnerDocument();

        var path = doc.createElementNS(SVGNS,"path");

        var seg = path.getPathSegList();
        //d="M50 50C100 50 100 60 50 60z m15 30 c -50 0 -50 -10 0 -10z "
        seg.appendItem(path.createSVGPathSegMovetoAbs(50,50));
        seg.appendItem(path.createSVGPathSegCurvetoCubicAbs(50,60,100,50,100,60));
        seg.appendItem(path.createSVGPathSegClosePath());

        seg.appendItem(path.createSVGPathSegMovetoRel(15,30));
        seg.appendItem(path.createSVGPathSegCurvetoCubicRel(0,-10,-50,0,-50,-10));
        seg.appendItem(path.createSVGPathSegClosePath());

        elt.insertBefore(path, elt.getFirstChild());
    }

    function quadra(evt) {
        var elt = evt.target;
        var doc = elt.getOwnerDocument();

        var path = doc.createElementNS(SVGNS,"path");

        var seg = path.getPathSegList();
        //d="M50 50Q 75 30 100 50z m30 20 q -25 20 -50 0z "
        seg.appendItem(path.createSVGPathSegMovetoAbs(50,50));
        seg.appendItem(path.createSVGPathSegCurvetoQuadraticAbs(100,50,75,30));
        seg.appendItem(path.createSVGPathSegClosePath());

        seg.appendItem(path.createSVGPathSegMovetoRel(15,20));
        seg.appendItem(path.createSVGPathSegCurvetoQuadraticRel(-50,0,-25,20));
        seg.appendItem(path.createSVGPathSegClosePath());

        elt.insertBefore(path, elt.getFirstChild());
    }

    function arc(evt) {
        var elt = evt.target;
        var doc = elt.getOwnerDocument();

        var path = doc.createElementNS(SVGNS,"path");

        var seg = path.getPathSegList();
        //d="M50 50 A50 50 0 0 0 90 90z m10 -10 a50 50 0 0 1 40 40z "
        seg.appendItem(path.createSVGPathSegMovetoAbs(50,50));
        seg.appendItem(path.createSVGPathSegArcAbs(90,90,50,50,0,false,false));
        seg.appendItem(path.createSVGPathSegClosePath());

        seg.appendItem(path.createSVGPathSegMovetoRel(10,-10));
        seg.appendItem(path.createSVGPathSegArcRel(40,40,50,50,0,false,true));
        seg.appendItem(path.createSVGPathSegClosePath());

        elt.insertBefore(path, elt.getFirstChild());
    }

    function cubicsmooth(evt) {
        var elt = evt.target;
        var doc = elt.getOwnerDocument();

        var path = doc.createElementNS(SVGNS,"path");

        var seg = path.getPathSegList();
        //d="M50 30 C60 30 60 55 50 55 S 40 80 50 80z m30 0 c-10 0 -10 25 0 25 s 10 25 0 25z"
        seg.appendItem(path.createSVGPathSegMovetoAbs(50,30));
        seg.appendItem(path.createSVGPathSegCurvetoCubicAbs(50,55,60,30,60,55));
        seg.appendItem(path.createSVGPathSegCurvetoCubicSmoothAbs(50,80,40,80));
        seg.appendItem(path.createSVGPathSegClosePath());

        seg.appendItem(path.createSVGPathSegMovetoRel(30,0));
        seg.appendItem(path.createSVGPathSegCurvetoCubicRel(0,25,-10,0,-10,25));
        seg.appendItem(path.createSVGPathSegCurvetoCubicSmoothRel(0,25,10,25));
        seg.appendItem(path.createSVGPathSegClosePath());

        elt.insertBefore(path, elt.getFirstChild());
    }

    function quadrasmooth(evt) {
        var elt = evt.target;
        var doc = elt.getOwnerDocument();

        var path = doc.createElementNS(SVGNS,"path");

        var seg = path.getPathSegList();
        //d="M50 50 Q 62.5 30 75 50 T 100 50z m 0 25 q 12.5 20 25 0t25 0z"
        seg.appendItem(path.createSVGPathSegMovetoAbs(50,50));
        seg.appendItem(path.createSVGPathSegCurvetoQuadraticAbs(75,50,62.5,30));
        seg.appendItem(path.createSVGPathSegCurvetoQuadraticSmoothAbs(100,50));
        seg.appendItem(path.createSVGPathSegClosePath());

        seg.appendItem(path.createSVGPathSegMovetoRel(0,25));
        seg.appendItem(path.createSVGPathSegCurvetoQuadraticRel(25,0,12.5,20));
        seg.appendItem(path.createSVGPathSegCurvetoQuadraticSmoothRel(25,0));
        seg.appendItem(path.createSVGPathSegClosePath());

        elt.insertBefore(path, elt.getFirstChild());
    }
    </script>

    <g id="test-content" >
      <g style="fill:gold; stroke:orange; stroke-width:4" >
        <!-- onload="moveclose(evt)" -->
        <g transform="translate(0,20)" onload="moveclose(evt)">
          <g style="fill:black; stroke:none; text-anchor:middle">
            <text x="75" y="100" >MoveTo/LineTo/close</text>
          </g>
        </g>

        <g transform="translate(150,20)" onload="horizonvertic(evt)">
          <g style="fill:black; stroke:none; text-anchor:middle">
            <text x="75" y="100" >MoveTo/HV/close</text>
          </g>
        </g>

        <g transform="translate(300,20)" onload="cubic(evt)">
          <g style="fill:black; stroke:none; text-anchor:middle">
            <text x="75" y="100" >MoveTo/Cubic</text>
          </g>
        </g>

        <g transform="translate(0,150)" onload="quadra(evt)">
          <g style="fill:black; stroke:none; text-anchor:middle">
            <text x="75" y="100" >MoveTo/Quadratic</text>
          </g>
        </g>

        <g transform="translate(150,150)" onload="cubicsmooth(evt)">
          <g style="fill:black; stroke:none; text-anchor:middle">
            <text x="75" y="100" >Cubic/CubicSmooth</text>
          </g>
        </g>

        <g transform="translate(300,150)" onload="quadrasmooth(evt)">
          <g style="fill:black; stroke:none; text-anchor:middle">
            <text x="75" y="100" >Quadratic/QuadraticSmooth</text>
          </g>
        </g>

        <g transform="translate(0,280)" onload="arc(evt)">
          <g style="fill:black; stroke:none; text-anchor:middle">
            <text x="75" y="120" >Moveto/Arcto</text>
          </g>
        </g>
      </g>
    </g>

</svg>