blob: 45920fec39e2862d7876d5dcef8a39657722f13f [file] [log] [blame]
<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>