Почему мой текст SVG не центрирован вертикально в Microsoft Edge? - PullRequest
Новая
       29

Почему мой текст SVG не центрирован вертикально в Microsoft Edge?

0 голосов
/ 27 февраля 2019

У меня есть SVG, который хорошо представлен в Firefox и Chrome, но в Edge текст не центрируется по вертикали. 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
       <rect fill="#ff0000" x="0" y="0" width="64" height="64" rx="8" ry="8" /> 
       <text font-size="32px" alignment-baseline="middle" dominant-baseline="center" fill="#fff" text-anchor="middle" lengthAdjust="spacingAndGlyphs" textLength="85%" x="32" y="32">
           dev
       </text>
    </svg>

Вот как это выглядит, когда оно хорошо представлено:

enter image description here

И этокак Edge представляет это:

enter image description here

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Для наиболее надежного кросс-браузерного поведения вы должны вообще не использовать атрибуты x-baseline.Вместо этого разместите текстовую базовую линию именно там, где вы хотите.

Например: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
       <rect fill="#ff0000" x="0" y="0" width="64" height="64" rx="8" ry="8" /> 
       <text font-size="32px" fill="#fff" text-anchor="middle" lengthAdjust="spacingAndGlyphs" textLength="85%" x="32" y="39">
           dev
       </text>
    </svg>
0 голосов
/ 27 февраля 2019

Вот что вы можете сделать: вы держите alignment-baseline="baseline".Это работает правильно на Edge.Затем вы смещаете текст на y с помощью dy = font-size/4

Также я удалил lengthAdjust="spacingAndGlyphs" textLength="85%" из вашего кода, так как это смещало текст вправо в Edge.

svg{width:90vh;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
       <rect fill="#ff0000" x="0" y="0" width="64" height="64" rx="8" ry="8" /> 
       <text font-size="32px" dy="8" dominant-baseline="baseline" text-anchor="middle" fill="#fff"   x="32" y="32">dev</text>
    </svg>
...