Кроссбраузерный textPath горизонтальное выравнивание по центру для многострочного текста - PullRequest
Новая
       22

Кроссбраузерный textPath горизонтальное выравнивание по центру для многострочного текста

0 голосов
/ 30 сентября 2019

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

Следующий подход работает в Firefox 68.0.2 

path { stroke: #000; }
text { fill: #000; } 
<svg width="400" height="120">
  <path id="p1" d="M10,40l250,0" />
  <text text-anchor="middle">
    <textPath href="#p1" startOffset="50%">
      <tspan x="0" dy="1.4em">this is the first line</tspan>
      <tspan x="0" dy="1.4em">and this is the second</tspan>
    </textPath>
  </text>
</svg>

Однако в Chrome версии 77.0.3865.90 обе строки отображаются слева. Похоже, что объединенная длина двух <tspan> используется для вычисления центральной точки.

screenshot from Chrome showing the incorrectly aligned lines

Я могу заставить его работать в обоих браузерахиспользуя два отдельных элемента <text>: 

path { stroke: #000; }
text { fill: #000; }
<svg width="400" height="120">
  <path id="p1" d="M10,40l250,0" />
  <text text-anchor="middle">
    <textPath href="#p1" startOffset="50%">
      <tspan x="0" dy="1.4em">this is the first line</tspan>          
    </textPath>
  </text>
  <text text-anchor="middle">
    <textPath href="#p1" startOffset="50%">
      <tspan x="0" dy="2.8em">and this is the second</tspan>
    </textPath>
  </text>
</svg>

(я также пытался использовать два <textPath> в одном и том же родительском элементе <text>, но поведение dy также отличается в обоих браузерах)

Мои вопросы:

  1. Какой браузер работает правильно (это ошибка в другом)?
  2. Существует ли кросс-браузерный способ достижениятот же результат без рендеринга двух отдельных <text> элементов?

1 Ответ

2 голосов
/ 01 октября 2019

Я считаю, что Chrome делает все правильно, за исключением пропущенного "а". : - /

В SVG 1.1 взаимодействие атрибутов startOffset и x не было четко определено, и браузеры делали все по-другому.

Однако в SVG 2сделана попытка полностью описать алгоритм размещения текста для <textPath> элементов. Вы можете найти его здесь:

https://svgwg.org/svg2-draft/single-page.html#text-TextpathLayoutRules

Там написано:

Для привязки текста: середина, начальная точка на пути равнаточка на пути, представляющая точку на пути, которая составляет ['startOffset' минус половина от общих значений продвижения для всех глифов в элементе 'textPath'] вдоль пути от начала пути

Затем, позже, он говорит:

Когда направление inline-base является горизонтальным, тогда любые атрибуты 'x' в элементах 'text' или 'tspan' представляют новые абсолютные смещения вдольпуть, таким образом предоставляя явные новые значения для начальной точки на пути.

Другими словами, ваши атрибуты x="0" имеют приоритет над настройками startOffset и text-anchor.

Так что быть более простым и понятным, как во втором SVG, - это путь.

...