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

<?xml version="1.0" standalone="no"?>
<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">
<defs>
    <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" />
</defs>

<use xlink:href="#MyPath" fill="none" stroke="red" />
<g id="container"/>

<script>
<![CDATA[
    var path = document.getElementById("MyPath");
    var container = document.getElementById("container");

    var totalLength = path.getTotalLength();
    var firstPoint = path.getPointAtLength(0.0 * totalLength);
    var midPoint = path.getPointAtLength(0.5 * totalLength);
    var lastPoint = path.getPointAtLength(1.0 * totalLength);

    var text1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text1.appendChild(document.createTextNode("A"));
    text1.setAttribute("x", firstPoint.x);
    text1.setAttribute("y", firstPoint.y);

    var text2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text2.appendChild(document.createTextNode("B"));
    text2.setAttribute("x", midPoint.x);
    text2.setAttribute("y", midPoint.y);

    var text3 = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text3.appendChild(document.createTextNode("C"));
    text3.setAttribute("x", lastPoint.x);
    text3.setAttribute("y", lastPoint.y);

    container.appendChild(text1);
    container.appendChild(text2);
    container.appendChild(text3);
]]>
</script>
</svg>