| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <style> |
| 3 text { |
| 4 font-size: 50px; |
| 5 font-style: italic; |
| 6 } |
| 7 rect { |
| 8 stroke-width: 1px; |
| 9 stroke: green; |
| 10 fill: transparent; |
| 11 } |
| 12 #middleGlyphOverhang { |
| 13 font-family: cursive; |
| 14 } |
| 15 </style> |
| 16 No glyphs should extend outside the rects.<br> |
| 17 <svg id="svg" width="700" height="500"> |
| 18 <defs> |
| 19 <path id="straightPath" d="M50 100 L 400 100"/> |
| 20 <path id="backwardsPath" d="M400 150 L 50 150"/> |
| 21 <path id="slantedPath" d="M50 250 L 400 350"/> |
| 22 <path id="middleGlyphOverhangPath" d="M50 450 L 400 450"/> |
| 23 </defs> |
| 24 |
| 25 <text id="straightText"> |
| 26 <textPath xlink:href="#straightPath">ffffffffffffffffffffffff</textPath> |
| 27 </text> |
| 28 |
| 29 <text id="backwardsText"> |
| 30 <textPath xlink:href="#backwardsPath">ffffffffffffffffffffffff</textPath> |
| 31 </text> |
| 32 |
| 33 <text id="slantedText"> |
| 34 <textPath xlink:href="#slantedPath">ffffffffffffffffffffffff</textPath> |
| 35 </text> |
| 36 |
| 37 <text id="middleGlyphOverhang"> |
| 38 <textPath xlink:href="#middleGlyphOverhangPath">'faQ'</textPath> |
| 39 </text> |
| 40 </svg> |
| 41 <script> |
| 42 [straightText, backwardsText, slantedText, middleGlyphOverhang].forEach(functi
on (textElement) { |
| 43 var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); |
| 44 rect.setAttribute('x', textElement.getBBox().x); |
| 45 rect.setAttribute('y', textElement.getBBox().y); |
| 46 rect.setAttribute('width', textElement.getBBox().width); |
| 47 rect.setAttribute('height', textElement.getBBox().height); |
| 48 document.getElementById('svg').appendChild(rect); |
| 49 }); |
| 50 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1505713002:
Include glyph overflow in SVG text bounding boxes (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master