<svg width="500" height="150" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="background" width="100%" height="100%" fill="red" />
    <text id="text">
        <textPath xlink:href="#path">This is text on a path</textPath>
    </text>
    <defs>
        <path id="path"
              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" />
        <style type="text/css">
        <![CDATA[
            @font-face {
               font-family: Ahem;
               src: url(../../resources/Ahem.ttf);
            }
            text {
               font-family: Ahem;
               font-size: 40px;
            }
        ]]>
        </style>
        <script type="text/javascript">
        <![CDATA[
            // The point at 150,75 is contained within the text's bounding box
            // but not in a painted part so the element should be the background.
            document.elementFromPoint(150, 75).setAttribute("fill", "green");
            document.getElementById("text").remove();
        ]]>
        </script>
    </defs>
</svg>