34 lines
1.2 KiB
XML
34 lines
1.2 KiB
XML
|
<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>
|