Текстовый элемент SVG не отображается

Question

В основном я хочу сопоставить SVG холст с -1..1 и напечатать текст на холсте.

Простой пример без запрошенного сопоставления :

  <style>
   .text {font: 14pt sans-serif; fill: red;}
  </style>

<svg class="text" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="14pt">TEXT</text>
</svg>

Я хочу этот код для отображения текста:

  <style>
   .text {font: 14pt sans-serif; fill: red;}
  </style>

<svg class="text" viewBox="-1 -1 2 2" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="0">TEXT</text>
</svg>

Как я понял из MDN , центр холста будет в 0,0. Я ожидаю, что текстовая строка будет напечатана в центре (на самом деле выше нулевой точки). Я определенно что-то упустил с этой проблемой. Вы можете мне помочь?

Answer 1

Как я уже сказал: ваш шрифт слишком велик: 14pt по сравнению с размером холста svg: width: 2, height: 2. Чтобы понять, что происходит, я центрировал холст svg в центре окна (маленький квадрат с серебряной рамкой) и добавил overflow:visible;, чтобы вы могли видеть текст.

.text {font: 14pt sans-serif; fill: red;}
svg{
border:1px solid silver;
width:25px;
height:25px;
display:block;
margin:auto;
position:absolute;
left:0;right:0;top:0;bottom:0;
overflow:visible;
}

<svg class="text" viewBox="-1 -1 2 2" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="0">TEXT</text>
</svg>

Решение вашей проблемы - установить больший viewBox и меньший размер шрифта. У вас может возникнуть соблазн использовать очень маленький размер шрифта для вашего viewBox (-1 -1 2 2). Прочтите эту статью: Пределы чисел в SVG

Answer 2

Установите положение текста по центру элемента:

1. Вы можете использовать, x = "50%" y = "50%".
2. Используйте text-anchor, чтобы центрировать текст по горизонтали со средним значением. Вот простая демонстрация:

<svg width="200" height="100">
  <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>    
</svg>