| <!DOCTYPE html> |
| <style> |
| text { |
| font-size: 50px; |
| font-style: italic; |
| } |
| rect { |
| stroke-width: 1px; |
| stroke: green; |
| fill: transparent; |
| } |
| #middleGlyphOverhang { |
| font-family: cursive; |
| } |
| </style> |
| No glyphs should extend outside the rects.<br> |
| <svg id="svg" width="700" height="500"> |
| <defs> |
| <path id="straightPath" d="M50 100 L 400 100"/> |
| <path id="backwardsPath" d="M400 150 L 50 150"/> |
| <path id="slantedPath" d="M50 250 L 400 350"/> |
| <path id="middleGlyphOverhangPath" d="M50 450 L 400 450"/> |
| </defs> |
| |
| <text id="straightText"> |
| <textPath xlink:href="#straightPath">ffffffffffffffffffffffff</textPath> |
| </text> |
| |
| <text id="backwardsText"> |
| <textPath xlink:href="#backwardsPath">ffffffffffffffffffffffff</textPath> |
| </text> |
| |
| <text id="slantedText"> |
| <textPath xlink:href="#slantedPath">ffffffffffffffffffffffff</textPath> |
| </text> |
| |
| <text id="middleGlyphOverhang"> |
| <textPath xlink:href="#middleGlyphOverhangPath">'faQ'</textPath> |
| </text> |
| </svg> |
| <script> |
| [straightText, backwardsText, slantedText, middleGlyphOverhang].forEach(function (textElement) { |
| var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); |
| rect.setAttribute('x', textElement.getBBox().x); |
| rect.setAttribute('y', textElement.getBBox().y); |
| rect.setAttribute('width', textElement.getBBox().width); |
| rect.setAttribute('height', textElement.getBBox().height); |
| document.getElementById('svg').appendChild(rect); |
| }); |
| </script> |
