OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <style> |
| 3 html { |
| 4 zoom: 1.8; |
| 5 } |
| 6 text { |
| 7 font-size: 12px; |
| 8 font-style: italic; |
| 9 } |
| 10 rect { |
| 11 stroke-width: 1px; |
| 12 stroke: green; |
| 13 fill: transparent; |
| 14 } |
| 15 #middleGlyphOverhang { |
| 16 font-family: cursive; |
| 17 } |
| 18 </style> |
| 19 No glyphs should extend outside the rects.<br> |
| 20 <svg id="svg" width="200" height="100"> |
| 21 <defs> |
| 22 <path id="path" d="M20 20 L 200 20"/> |
| 23 </defs> |
| 24 |
| 25 <text id="pathText"> |
| 26 <textPath xlink:href="#path">ffffffffffffffffffffffff</textPath> |
| 27 </text> |
| 28 <text id="tspanText" x="20" y="50">ffffff<tspan font-size="24px">ffffff</tspan
></text> |
| 29 <text id="middleGlyphOverhang" x="20" y="75">'faQ'</text> |
| 30 </svg> |
| 31 <script> |
| 32 [pathText, tspanText, middleGlyphOverhang].forEach(function (textElement) { |
| 33 var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); |
| 34 rect.setAttribute('x', textElement.getBBox().x); |
| 35 rect.setAttribute('y', textElement.getBBox().y); |
| 36 rect.setAttribute('width', textElement.getBBox().width); |
| 37 rect.setAttribute('height', textElement.getBBox().height); |
| 38 document.getElementById('svg').appendChild(rect); |
| 39 }); |
| 40 </script> |
OLD | NEW |