Получение текста SVG для выравнивания на основе левого верхнего угла в Chrome

Question

MDN, кажется, говорит использовать text-anchor="start" и alignment-baseline="hanging", но это, похоже, не работает для меня. Что я делаю не так?

<svg viewBox="-1.1 -1.1 2.2 2.2" width="150" height="150">
  <rect x="-1" y="-1" width="2" height="2" fill="red" />
  <text x="-1" y="-1" text-anchor="start" alignment-baseline="hanging" style="font-size: 0.6px;">TEST</text>
</svg>
<p>"TEST" should be inside the red box at the top left?</p>

В этом Q & A говорится, что нужно использовать dominant-baseline, но это тоже не работает

<svg viewBox="-1.1 -1.1 2.2 2.2" width="150" height="150">
  <rect x="-1" y="-1" width="2" height="2" fill="red" />
  <text x="-1" y="-1" text-anchor="start" dominant-baseline="hanging" style="font-size: 0.6px;">TEST</text>
</svg>
<p>"TEST" should be inside the red box at the top left?</p>

Результаты для доминантного базового уровня в Chrome

Результаты для доминантного базового уровня Firefox

Странно то, что живой пример на MDN , кажется, работает с alignment-baseline, работает в Chrome, но (а) этоу меня не работает и (б) не работает в Firefox

Answer 1

Кажется, это ошибка в Chrome , если размер шрифта слишком мал

Если я изменю размер шрифта на 1px, он будет работать. Ниже 1px это не удается

<svg viewBox="-1.1 -1.1 2.2 2.2" width="150" height="150">
  <rect x="-1" y="-1" width="2" height="2" fill="red" />
  <text x="-1" y="-1" text-anchor="start" dominant-baseline="hanging" style="font-size: 0.6px;">TEST</text>
</svg>
<span>0.6px</span>

<svg viewBox="-1.1 -1.1 2.2 2.2" width="150" height="150">
  <rect x="-1" y="-1" width="2" height="2" fill="red" />
  <text x="-1" y="-1" text-anchor="start" dominant-baseline="hanging" style="font-size: 1px;">TEST</text>
</svg>
<span>1px</span>

<svg viewBox="-1.1 -1.1 2.2 2.2" width="150" height="150">
  <rect x="-1" y="-1" width="2" height="2" fill="red" />
  <text x="-1" y="-1" text-anchor="start" dominant-baseline="hanging" style="font-size: 0.4pt;">TEST</text>
</svg>
<span>0.4pt</span>

Результаты в Firefox и Safari

Результаты в Chrome

Я предполагаю, что смогу обойти это, увеличив шрифты. Я выбрал окно просмотра в основном из 2 единиц, так как математика, которую я делал, означала, что я мог просто установить значения в SVG в диапазоне от -1 до +1, который был диапазоном значений, которые я строил, поэтому математика не требовала применения значений,Для изменения размера viewBox мне придется добавить математику, но она должна обойти эту проблему

Answer 2

Прежде всего, пример MDN alignment-baseline здесь не работает и в Firefox. Но dominant-baseline работает. Который, кажется, подтверждает информацию со своей страницы:

Для выравнивания объекта в других элементах (таких как <text>), см. Dominant-baseline.

Что касается SVGсамо по себе, вы пытаетесь сжать текст в 1px, и это, кажется, делает текст исчезнуть. Если вы удалите font-size часть, вы увидите там верхний левый угол огромной буквы "T".

Похоже, шрифт не может иметь размер менее 1 пикселя. Таким образом, вместо работы с немного странными координатами в диапазоне от -1 до 2.2, попробуйте использовать «простые» вещи (по крайней мере, пока текст не будет отображен в правильном месте):

<svg viewBox="0 0 15 15" width="150" height="150">
  <rect x="0" y="0" width="15" height="15" fill="red" />
  <text x="0" y="0" alignment-baseline="hanging" style="font-size: 5px">TEST</text>
</svg>
<p>"TEST" should be inside the red box at the top left?</p>

Это должно как минимум визуализировать текст "ТЕСТ" в Chrome. Это не работает в Firefox.

Вот ваш второй фрагмент с фиксированными координатами, работающий как в Chrome, так и в Firefox:

<svg viewBox="0 0 15 15" width="150" height="150">
  <rect x="0" y="0" width="15" height="15" fill="red" />
  <text x="0" y="0" dominant-baseline="hanging" style="font-size: 5px;">TEST</text>
</svg>
<p>"TEST" should be inside the red box at the top left?</p>

Вы заметите, что я не использовал text-anchor="start". Это потому, что, по крайней мере, согласно https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor, start по умолчанию, поэтому пример отображается так, как если бы он был установлен таким образом.