| <?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. |
| |
| --> |
| <!-- ====================================================================== --> |
| <!-- Test of getPathLength, and getPointAtLength interfaces. --> |
| <!-- --> |
| <!-- @author deweese@apache.org --> |
| <!-- @version $Id$ --> |
| <!-- ====================================================================== --> |
| |
| <?xml-stylesheet type="text/css" href="../../resources/style/test.css" ?> |
| |
| <svg id="body" width="450" height="500" viewBox="0 0 450 500" |
| onload="load(evt)" |
| xmlns="http://www.w3.org/2000/svg" |
| xmlns:xlink="http://www.w3.org/1999/xlink"> |
| |
| <title>Test getPathLength and getPointAtLength interfaces</title> |
| |
| <text x="50%" y="40" class="title" |
| >Test getPathLength and getPointAtLength interfaces</text> |
| |
| <style type="text/css"><![CDATA[ |
| text { stroke: none } |
| circle { stroke: none } |
| path { fill:none } |
| ]]></style> |
| |
| <script type="text/ecmascript"> |
| var svgNamespaceURI = "http://www.w3.org/2000/svg"; |
| var doc; |
| |
| function doLength(cnt, dist) { |
| var p = doc.getElementById("p"+cnt); |
| var l = doc.getElementById("l"+cnt); |
| var c = doc.getElementById("c"+cnt); |
| |
| var len, pt; |
| len = p.getTotalLength(); |
| pt = p.getPointAtLength(dist); |
| l.appendChild(doc.createTextNode(("Len: " + len).substring(0, 10))); |
| c.setAttribute("cx", ""+pt.getX()); |
| c.setAttribute("cy", ""+pt.getY()); |
| } |
| |
| function load(evt) { |
| doc = evt.target.getOwnerDocument(); |
| doLength(1, 25); |
| doLength(2, 25); |
| doLength(3, 25); |
| doLength(4, 25); |
| doLength(5, 25); |
| doLength(6, 25); |
| doLength(7, (78.546)/2); |
| doLength(8, 25); |
| |
| } |
| </script> |
| |
| <g stroke="black"> |
| <path id="p1" d="M 20,60 h 50"/> |
| <text id="l1" x="80" y="65"/> |
| <circle cx="45" cy="60" r="3" fill="red"/> |
| <circle id="c1" cx="0" cy="0" r="1" fill="black"/> |
| |
| <path id="p2" d="M 20,60 l 40,30"/> |
| <text id="l2" x="70" y="95"/> |
| <circle cx="40" cy="75" r="3" fill="red"/> |
| <circle id="c2" cx="0" cy="0" r="1" fill="black"/> |
| |
| <path id="p3" d="M 20,60 v 50"/> |
| <text id="l3" x="30" y="115"/> |
| <circle cx="20" cy="85" r="3" fill="red"/> |
| <circle id="c3" cx="0" cy="0" r="1" fill="black"/> |
| |
| <path id="p4" d="M 170,60 c 15 0 35 0 50 0"/> |
| <text id="l4" x="230" y="65"/> |
| <circle cx="195" cy="60" r="3" fill="red"/> |
| <circle id="c4" cx="0" cy="0" r="1" fill="black"/> |
| |
| <path id="p5" d="M 170,60 c 15 0 30 0 30,40"/> |
| <text id="l5" x="210" y="105"/> |
| <circle cx="192.8" cy="67.3" r="3" fill="red"/> |
| <circle id="c5" cx="0" cy="0" r="1" fill="black"/> |
| |
| <path id="p6" d="M 20,170 a 10 0 0 0 0 50 0"/> |
| <text id="l6" x="80" y="175"/> |
| <circle cx="45" cy="170" r="3" fill="red"/> |
| <circle id="c6" cx="0" cy="0" r="1" fill="black"/> |
| |
| <path id="p7" d="M 20,170 a 10 10 0 0 0 50 0"/> |
| <text id="l7" x="80" y="195"/> |
| <circle cx="45" cy="195" r="3" fill="red"/> |
| <circle id="c7" cx="0" cy="0" r="1" fill="black"/> |
| |
| <path id="p8" d="M 170,170 v10h10v-10h10v10"/> |
| <text id="l8" x="200" y="180"/> |
| <circle cx="180" cy="175" r="3" fill="red"/> |
| <circle id="c8" cx="0" cy="0" r="1" fill="black"/> |
| |
| |
| </g> |
| </svg> |
