Как сделать SVG текст в нужной форме и по центру?

Question

[Илья]

Есть треугольник с скруглённым низом на SVG сделанный на , как можно написать внутри текст, что бы он:

1. Был написан вертикально
   
2. Переносились строки
   
3. Был по центру по вертикали и горизонтали
   
4. Не заходил за границы фигуры
   

Первый вопрос легко решаться с помощью rotate, у второго есть два варианта или вставка HTML и функции(для D3) для переноса текста.
Третий вопрос легко решается при использовании вставки HTML (с помощью flex). А решить 4-й не как не удаётся, при использовании html можно воспользоваться shape-outside (которое вероятно не везде будет работать), но при использовании его, приходится создавать дополнительные элементы и выравнивание через flex уже не сделать.

Вот пример с 3-я строками:


Как можно это реализовать подскажите пожалуйста.

Comments

[Максим Тимофеев]

rotate перевернет буквы, Вам так надо? Или все же так:
я
т
е
к
с
т

[Илья]

Максим Тимофеев, просто повёрнутые на бок буквы (rotate)

[Максим]

Илья, покажи скриншотом или картинкой - что должно получится в итоге - нарисуй в паинте

[Илья]

Максим Ленский, добавил в вопрос

[Максим]

Илья, каким векторным редактором пользуетесь ?

[Илья]

Максим Ленский, не каким, мне нужно это на d3.js генерировать, понять хотя бы как это реализуется.

[Максим]

Илья, переноса строки не бывает в svg - и потому переносы добавляют в ручную - пользуйтесь редактором

[Илья]

Максим Ленский, разбить текст на tspan это ещё можно, но как его выровнять по вертикали и горизонтали?

[Максим]

Илья, x="" y=""

[Илья]

Максим Ленский, то есть стандартными средствами это вообще не как не реализовать? Только редактор, который выставить сам нужные координаты и разобьет строку на подстроки в нужных местах?

[Максим]

Илья, У меня света не было ! В svg всё работает по координатам ... Т.е если мы можем в css сделать принудительный перенос строки то в svg такой опции нету , даже в forignObject, мы только единственное что может разбить на tspan и потом самостоятельно перенести по координатам эти tspan

Answer 1

[Варлам Ерофеич]

Думаю, можно написать такой код:

HTML этого безобразия - здесь.

<svg id="seg" viewBox="0 0 400 400" style="background: #acc;">
<defs>
  <g id="circle"><circle r="50%" cx="0%" cy="0%"/></g>
</defs>
<style> 
  #mal {font: italic 12px sans-serif;fill: #000;}
  #seg {border-radius:30%;transform: rotate(0grad);} /* здесь - вращать треугл вместе с содержимым*/
  #circle {
    fill: none; 
    stroke: #f82; 
    stroke-width: 100%; 
    stroke-dasharray: 29% 360%; 
    } /* Здесь можно сузить бёдра треугла */
</style>
<symbol id="txt" x="0" y="0" viewBox="0 0 200 200" width="100" height="100" style="background-color: #c6c;"> 
 <text id="mal" x="0" y="42%">Текст по центру </text>   
 <text id="mal" x="0" y="50%">и при этом не заходит за</text>
 <text id="mal" x="0" y="58%">границы фигуры  </text>
</symbol> 
 <use xlink:href="#circle" x="7.1%" y="0%" width="20" height="20" transform="rotate(73, 110, 110)"></use>
 <use xlink:href="#txt" x="5%" y="0%" width="400" height="400" transform="rotate(-90, 200, 200)"></use>
</svg>
<!--  -->

CSS - здесь.

body {background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#243844;
background-size:16px 16px;
background-attachment: fixed;
}

Результат лежит в песочнице.
P. S.
- Нет, в три строки не уложился, но "причесал" по-максимуму.
Этот вариант гораздо ближе к оригиналу.

Comments

[Илья]

Вы просто в ручную разбили на подстроки? Мне нужно сделать это автоматически, текст может быть разной длины

[Варлам Ерофеич]

Илья, - здесь нужно изобретать редактор svg-текста (с автопереносом при переполнении и прочими прибамбасами, кои присущи обычным редакторам), но я таких пока не встречал. Жаль, что не умею "кодить", а то бы написал такой для пробы. Уж очень заинтересовала меня ваша задачка... )))