blob: 27df312b9f50e6263d317867e0cf5861029d4f45 [file] [log] [blame]
<svg width="500" height="150" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg">
<rect id="background" width="100%" height="100%" fill="red" />
<text id="text" dominant-baseline="hanging" x="10" y="10">Foo</text>
<defs>
<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 15,15 is contained within the text's bounding box.
var text = document.getElementById("text");
if (document.elementFromPoint(15, 15) === text) {
document.getElementById("background").setAttribute("fill", "green");
text.remove();
}
]]>
</script>
</defs>
</svg>