Как убрать разрыв строки?

Question

Есть текст расположенный по контуру, но он разрывается лексически ни верно

Я нарисовал круг из двух арок ...это и есть путь для текста

Вот пример

<svg viewBox="-450 -100 1000 980" xmlns="http://www.w3.org/2000/svg" style="max-width: 200px;">
  <path d="M0,0 
           A 400 400 0 0 0 100 830
           M0,0  
           A 400 400 0 0 1 100 780" fill="none" stroke="red" stroke-width="0" id="path" />

  <text text-anchor="middle" font-family="sans-serif">
    <textPath href="#path" font-size="105px" letter-spacing="5" startOffset="50%" rotate="auto">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

Как видно что последовательность слов нарушена

А ожидается что слова будут идти последовательно

такие команды как startOffset и text-anchor не дают нужного вида

Что сделать надо что бы исправить ситуацию ?

Answer 1

Проблема в том что в вопросе для одного текста задаётся две начальные точки в <path d="M ... M ...". Нужно чтобы линия пути была непрерывной:

<svg viewBox="-500 -100 1000 1000" xmlns="http://www.w3.org/2000/svg" style="max-width: 200px; border:1px solid blue;">
  <path fill="none" stroke="red" stroke-width="1" id="newpath" 
        d="M0,0 a 1 1 0 0 0 0 800 a 1 1 0 0 0 0 -800" />
  <text text-anchor="middle" font-family="sans-serif">
    <textPath href="#newpath" font-size="105px" letter-spacing="12" startOffset="50%" rotate="auto">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

То же, но с абсолютными координатами:

<svg viewBox="-500 -100 1000 1000" xmlns="http://www.w3.org/2000/svg" style="max-width: 200px; border:1px solid green;">
  <path fill="none" stroke="red" stroke-width="1" id="newpath" 
        d="M0,0 A 1 1 0 0 0 0 800 A 1 1 0 0 0 0 0" />
  <text text-anchor="middle" font-family="sans-serif">
    <textPath href="#newpath" font-size="105px" letter-spacing="12" startOffset="50%" rotate="auto">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

Answer 2

В общем проблема была в пути

<svg viewBox="-450 -100 1000 1480" xmlns="http://www.w3.org/2000/svg" style="max-width: 500px;">
  <path d="M0,0 A 400 400 0 0 0 100 830 A 400 400 0 0 0 0 0" fill="none" stroke="red" stroke-width="0" id="path" />

  <text text-anchor="middle" font-family="sans-serif">
    <textPath href="#path" font-size="105px" letter-spacing="5" startOffset="50%">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

БЛОГ НА HUSL

Как убрать разрыв строки?

Ответы (2 шт):