LayoutTests/svg/custom/path-textPath-simulation.svg

   1 <?xml version="1.0" standalone="no"?>
   2 <svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   3 <defs>
   4     <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" />
   5 </defs>
   6
   7 <use xlink:href="#MyPath" fill="none" stroke="red" />
   8 <g id="container"/>
   9
  10 <script>
  11 <![CDATA[
  12     var path = document.getElementById("MyPath");
  13     var container = document.getElementById("container");
  14
  15     var totalLength = path.getTotalLength();
  16     var firstPoint = path.getPointAtLength(0.0 * totalLength);
  17     var midPoint = path.getPointAtLength(0.5 * totalLength);
  18     var lastPoint = path.getPointAtLength(1.0 * totalLength);
  19
  20     var text1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
  21     text1.appendChild(document.createTextNode("A"));
  22     text1.setAttribute("x", firstPoint.x);
  23     text1.setAttribute("y", firstPoint.y);
  24
  25     var text2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
  26     text2.appendChild(document.createTextNode("B"));
  27     text2.setAttribute("x", midPoint.x);
  28     text2.setAttribute("y", midPoint.y);
  29
  30     var text3 = document.createElementNS("http://www.w3.org/2000/svg", "text");
  31     text3.appendChild(document.createTextNode("C"));
  32     text3.setAttribute("x", lastPoint.x);
  33     text3.setAttribute("y", lastPoint.y);
  34
  35     container.appendChild(text1);
  36     container.appendChild(text2);
  37     container.appendChild(text3);
  38 ]]>
  39 </script>
  40 </svg>