| <!-- |
| Any copyright is dedicated to the Public Domain. |
| http://creativecommons.org/publicdomain/zero/1.0/ |
| --> |
| <svg xmlns="http://www.w3.org/2000/svg"> |
| <style> |
| @font-face { |
| font-family: Ahem; |
| src: url(../../resources/fonts/Ahem.ttf); |
| } |
| </style> |
| <defs> |
| <clipPath id="c" x="0" y="0" width="600" height="400"> |
| <text x="20" y="100" style="font: 32px Ahem; white-space: pre">one</text> |
| </clipPath> |
| </defs> |
| <rect x="0" y="0" width="600" height="400" fill="blue" clip-path="url(#c)"/> |
| <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> |
| <rect x="20" y="73" width="96" height="32"/> |
| </g> |
| <script> |
| function waitUntilFontLoaded() { |
| var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas"); |
| canvas.width = 100; |
| canvas.height = 100; |
| var ctx = canvas.getContext("2d"); |
| ctx.font = "100px Ahem"; |
| ctx.fillText("_", 0, 100); |
| var img = ctx.getImageData(50, 50, 1, 1); |
| if (img.data[3] == 255) { |
| setTimeout(function() { |
| document.documentElement.removeAttribute("class"); |
| }, 1); |
| } else { |
| setTimeout(waitUntilFontLoaded, 200); |
| } |
| } |
| |
| setTimeout(waitUntilFontLoaded, 200); |
| </script> |
| </svg> |
