Last active
July 22, 2022 16:32
-
-
Save RupW/5f1f814531b6d55ee459f35b8995274b to your computer and use it in GitHub Desktop.
Examples of SVG text rendering differences on Safari
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en-US"> | |
| <head><title>Safari textpath multiple tspans text-anchor:middle</title> | |
| <style> | |
| body { | |
| height: 100%; | |
| margin: 0; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 14px; | |
| line-height: 1.42857143; | |
| color: #333; | |
| background-color: #fff | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="margin-left: 2vw;"> | |
| <p>All of the text is in SVG <textPath>s with style text-anchor:middle, and so should be roughly centered in each sector.</p> | |
| <ol> | |
| <li>'Two lines #1' has two <tspan>s in a single <textPath>. The text-anchor:middle is ignored on Safari. If you delete either one then the other centers correctly.</li> | |
| <li>'Two lines #2' has two <tspan>s in a separate <textPath>s, but still in the same <text>. The <tspan> dys are still summed on Safari, even though they're in separate <textPath> elements.</li> | |
| <li>'Two lines #3' has two separate <text> elements and renders fine on Safari.</li> | |
| </ol> | |
| </div> | |
| <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 400 400" | |
| style="max-height: calc(100vh - 128px); height: calc(100vh - 128px); margin-left: 0; max-width: 48vw;"> | |
| <g> | |
| <g transform="translate(200,200)"> | |
| <g> | |
| <path d="M-102.48386060985797,-141.05693288349642A15,15 0 0,1 -98.09277189659666,-162.72002981084495A190,190 0 0,1 98.09277189659666,-162.7200298108449A15,15 0 0,1 102.48386060985798,-141.05693288349636L61.084435254615265,-84.07551230664441A15,15 0 0,1 41.95644029056376,-79.62196379231273A90,90 0 0,0 -41.95644029056375,-79.62196379231273A15,15 0 0,1 -61.08443525461526,-84.07551230664443Z" | |
| style="fill: #fabed1; background-color: #fabed1" | |
| transform="translate(1.2246467991473532e-16, -2)"></path> | |
| <path d="M-120.49597671995697,-165.84848384686424A205,205 0 0,1 120.495976719957,-165.84848384686424L100.51127814201291,-138.341906038116A171,171 0 0,0 -100.51127814201288,-138.341906038116Z" | |
| style="fill: rgb(255, 255, 255);"></path> | |
| <path id="c1" | |
| d="M-120.49597671995697 -165.84848384686424A205 205 0 0 1 120.495976719957 -165.84848384686424" | |
| style="fill: none;"></path> | |
| <text letter-spacing="6"> | |
| <textPath startOffset="50%" xlink:href="#c1" | |
| style="text-anchor: middle; font-size: 20px;"> | |
| <tspan x="0" dy="70">Two</tspan> | |
| <tspan x="0" dy="20">Lines #1</tspan> | |
| </textPath> | |
| </text> | |
| </g> | |
| <g> | |
| <path d="M102.48386060985797,-141.05693288349636A15,15 0 0,1 124.44361114195209,-143.57502445046148A190,190 0 0,1 185.06827822473932,43.00851537696321A15,15 0 0,1 165.82236976505672,53.8789540126829L98.83669242555982,32.11398807957809A15,15 0 0,1 88.69024057815776,15.29840600155782A90,90 0 0,0 62.75973443163383,-64.50748587622054A15,15 0 0,1 61.084435254615265,-84.0755123066444Z" | |
| style="fill: #3effda; background-color: #3effda" | |
| transform="translate(1.902113032590307, -0.6180339887498948)"></path> | |
| <path d="M120.495976719957,-165.84848384686424A205,205 0 0,1 194.96658584050647,63.34848384686422L162.63066428647124,52.84190603811601A171,171 0 0,0 100.51127814201291,-138.341906038116Z" | |
| style="fill: rgb(255, 255, 255);"></path> | |
| <path id="c2" | |
| d="M120.495976719957 -165.84848384686424A205 205 0 0 1 194.96658584050647 63.34848384686422" | |
| style="fill: none;"></path> | |
| <text letter-spacing="6"> | |
| <textPath startOffset="50%" xlink:href="#c2" | |
| style="text-anchor: middle; font-size: 20px;"> | |
| <tspan x="0" dy="70">Two</tspan> | |
| </textPath> | |
| <textPath startOffset="50%" xlink:href="#c2" | |
| style="text-anchor: middle; font-size: 20px;"> | |
| <tspan x="0" dy="90">Lines #2</tspan> | |
| </textPath> | |
| </text> | |
| </g> | |
| <g> | |
| <path d="M165.82236976505672,53.87895401268288A15,15 0 0,1 175.00315326509815,73.98578476486249A190,190 0 0,1 16.285714285714295,189.30075411948067A15,15 0 0,1 8.881784197001252e-15,174.35595774162695L5.329070518200751e-15,103.92304845413264A15,15 0 0,1 12.857142857142861,89.07689867497085A90,90 0 0,0 80.74408929423052,39.754144992004626A15,15 0 0,1 98.83669242555983,32.11398807957809Z" | |
| style="fill: #b2ffa8; background-color: #b2ffa8" | |
| transform="translate(1.1755705045849463, 1.618033988749895)"></path> | |
| <path d="M194.96658584050647,63.34848384686422A205,205 0 0,1 1.255262969126037e-14,205L1.047073013270987e-14,171A171,171 0 0,0 162.63066428647124,52.84190603811601Z" | |
| style="fill: rgb(255, 255, 255);"></path> | |
| <path id="c3" | |
| d="M1.255262969126037e-14 205A205 205 0 0 0 194.96658584050647 63.34848384686422" | |
| style="fill: none;"></path> | |
| <text letter-spacing="6"> | |
| <textPath startOffset="50%" xlink:href="#c3" | |
| style="text-anchor: middle; font-size: 20px;"> | |
| <tspan x="0" dy="-65">One line</tspan> | |
| </textPath> | |
| </text> | |
| </g> | |
| <g> | |
| <path d="M8.881784197001252e-15,174.35595774162695A15,15 0 0,1 -16.285714285714274,189.30075411948067A190,190 0 0,1 -175.00315326509818,73.98578476486253A15,15 0 0,1 -165.82236976505675,53.878954012682925L-98.83669242555982,32.11398807957811A15,15 0 0,1 -80.74408929423052,39.75414499200464A90,90 0 0,0 -12.857142857142852,89.07689867497085A15,15 0 0,1 5.329070518200751e-15,103.92304845413264Z" | |
| style="fill: #ffd68b; background-color: #ffd68b" | |
| transform="translate(-1.175570504584946, 1.618033988749895)"></path> | |
| <path d="M1.255262969126037e-14,205A205,205 0 0,1 -194.96658584050647,63.34848384686424L-162.63066428647124,52.84190603811602A171,171 0 0,0 1.047073013270987e-14,171Z" | |
| style="fill: rgb(255, 255, 255);"></path> | |
| <path id="c4" | |
| d="M-194.96658584050647 63.34848384686424A205 205 0 0 0 1.255262969126037e-14 205" | |
| style="fill: none;"></path> | |
| <text letter-spacing="6"> | |
| <textPath startOffset="50%" xlink:href="#c4" | |
| style="text-anchor: middle; font-size: 20px;"> | |
| <tspan x="0" dy="-75">Two</tspan> | |
| </textPath> | |
| </text> | |
| <text letter-spacing="6"> | |
| <textPath startOffset="50%" xlink:href="#c4" | |
| style="text-anchor: middle; font-size: 20px;"> | |
| <tspan x="0" dy="-55">Lines #3</tspan> | |
| </textPath> | |
| </text> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Also hosted at https://rupertwood.com/svg-text-anchor-middle.html