| <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> |