Почему появляется смещение по y

Question

Приветствую. Столкнулся с проблемой. Почему-то свг не ведет отсчет от 0 в y координате. Прилагаю пример:

<svg height="200" width="200" style="font-family:arial; background: #3aaf72;">
  <text id="maintext" class="mainrow" x="100" y="0" fill="white" text-anchor="middle" style="font-size: 36px;"> 
    <tspan style="font-style: italic;" x="100" text-anchor="middle" y="0">Lorum</tspan>
  </text>
</svg>

Строка с текстом появится лишь при y = 40, почему так происходит?

Answer 1

Текст не виден, потому-что он расположен вне видимости viewport и viewBox.
Начало координат (0,0) находится в верхнем левом углу. Положительное направление координаты "y" - вниз. Если вы хотите увидеть текст, который расположен выше, надо либо поднять viewBox - первый пример, либо изменить координату - y- второй пример.

tspan не нужен, если всего одна строка текста. Добавил красную рамку - это зона видимости viewport. Очень удобно искать потерявшееся.

<svg baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
  height="200" width="200" viewBox="0 -100 200 200" style="font-family:arial; background: #3aaf72; border:1px solid red">
  <text id="maintext" class="mainrow" x="100" y="0" fill="white" text-anchor="middle" style="font-size: 36px;"> Lorum </text>
  </svg>

Изменяем координату y=100 viewBox возвращаем на место viewBox="0 0 200 200"

<svg baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
  height="200" width="200" viewBox="0 0 200 200" style="font-family:arial; background: #3aaf72; border:1px solid red">
  <text id="maintext" class="mainrow" x="100" y="100" fill="white" text-anchor="middle" style="font-size: 36px;"> Lorum </text>
  </svg>

Взял ваш исходник с патчем и немного поднял вверх с помощью viewBox, тот же случай - находился вне зоны видимости. Каким инструментом рисовали? Видимо после этого, судя по коду, была еще оптимизация. Рекомендую другой инструмент - делает всё аккуратно - SVG-Editor

<svg baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
   width="300" height="300"  viewBox="0 -100 300 300"  style="background:#3aaf72; border:1px solid red;">
<g transform="scale(0.04248046875)">
<path transform="translate(0,0) rotate(180) scale(-1, 1)" d="M82 0l197 1397h296l-163 -1164h635l-33 -233h-932z"></path>
<path transform="translate(1087,0) rotate(180) scale(-1, 1)" d="M72 430q0 139 72 258t195.5 188.5t268.5 69.5q202 0 331.5 -120.5t129.5 -317.5q0 -223 -152 -374.5t-376 -151.5q-198 0 -333.5 129.5t-135.5 318.5zM358 414q0 -98 57.5 -152.5t127.5 -54.5q57 0 104.5 30t75.5 76.5t43.5 99.5t15.5 103q0 93 -51 149t-135 56 q-51 0 -93.5 -23t-68.5 -58t-44 -77.5t-25 -80t-7 -68.5z"></path>
<path transform="translate(2240,0) rotate(180) scale(-1, 1)" d="M47 0l131 930h277l-21 -133l4 -4q124 153 226 153q42 0 80 -23.5t85 -78.5l-129 -256q-67 100 -131 100q-46 0 -94 -42t-74 -93l-77 -553h-277z"></path><path transform="translate(2987,0) rotate(180) scale(-1, 1)" d="M125 340l84 590h276l-69 -494q-9 -62 -9 -108q0 -140 82 -140q107 0 234 136l84 606h276l-131 -930h-276l16 104q-142 -120 -301 -120q-153 0 -221 101q-51 75 -51 181q0 35 6 74z"></path><path transform="translate(4117,0) rotate(180) scale(-1, 1)" d="M57 0l131 930h277l-16 -119l4 -4q145 139 290 139q92 0 154.5 -45t81.5 -125q97 93 174.5 131.5t163.5 38.5q149 0 221 -103q54 -77 53 -187q0 -37 -6 -78l-80 -578h-276l76 535q6 44 6 79q0 127 -80 127q-46 0 -106.5 -39t-118.5 -106l-84 -596h-277l72 532q6 47 6 82 q-1 46 -11 76q-18 50 -75 51q-89 0 -219 -145l-84 -596h-277z">
</path>
</g>
</svg>

здесь же на ru.stackoverflow статья о viewBox