Есть ли способ разместить два SVG <tspan>внутри <text>на левом краю без указания абсолютного x для ребенка? - PullRequest
Новая
       31

Есть ли способ разместить два SVG <tspan>внутри <text>на левом краю без указания абсолютного x для ребенка?

0 голосов
/ 04 мая 2020

Следующий код покажет «Мир» как непрерывный поток позиции x. Мы можем указать x="200" для этой секунды <tspan>, чтобы она совпадала с «Hello» на левом краю. Но есть ли способ сделать это без необходимости указывать абсолютное x из 200?

Это как если бы у нас есть <div>, а затем у нас есть два <div> s внутри, левый край выровняется, без необходимости указывать абсолютное x для родительского и абсолютного x для ребенка: 

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="200px" viewBox="0 0 400 200">

  <text x="200" y="30">
    <tspan>Hello</tspan>
    <tspan dy="1.2em">World</tspan>
  </text>

</svg>

Я думал об использовании 

  <style>
    text { position: relative }
    tspan { position: absolute; left: 0 }
  </style>

, но он не работает внутри Chrome.

1 Ответ

1 голос
/ 05 мая 2020

Вы можете использовать преобразование для позиционирования текста, тогда дополнительное значение tspan x равно 0. 

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="200px" viewBox="0 0 400 200">

  <text transform="translate(200, 30)">
    <tspan>Hello</tspan>
    <tspan x="0" dy="1.2em">World</tspan>
  </text>

</svg>
...