| <!DOCTYPE HTML> |
| <meta charset="utf8"> |
| <style> |
| .testTextRun { |
| font-size: 50px; |
| } |
| #highlightContainer text { |
| font-size: 10px; |
| } |
| </style> |
| <svg width="600px" height="500px" xmlns="http://www.w3.org/2000/svg"> |
| <defs> |
| <path id="path" d="M 25 400 C 300 400 200 200 500 450"/> |
| </defs> |
| <g id="highlightContainer"/> |
| |
| <text x="25" y="50" class="testTextRun" font-family="cursive">öh у̌eah! fi ffi abcffidef</text> |
| <text x="25" y="150" class="testTextRun" font-family="serif">öh у̌eah! fi ffi abcffidef</text> |
| <text x="25" y="250" class="testTextRun" font-family="sans-serif">öh у̌eah! fi ffi abcffidef</text> |
| <use xlink:href="#path" stroke-width="2" stroke="black" fill="transparent"/> |
| <text x="25" y="350" class="testTextRun" font-family="cursive"> |
| <textPath xlink:href="#path">ffiffiffiffiffiffiffiffiffiffiffi</textPath> |
| </text> |
| </svg> |
| <script src="resources/highlightGlyphs.js"></script> |
| <script> |
| highlightGlyphs(document.querySelectorAll('.testTextRun'), highlightContainer); |
| </script> |
| |
