How to make SVG text in the right shape and center?

Question

css

There is a triangle with a rounded bottom on SVG made on , how can I write text inside, what would it be:

1. Was written vertically
   
2. Wrapping lines
   
3. Was centered vertically and horizontally
   
4. Did not go beyond the boundaries of the figure
   

The first question is easily solved with rotate, the second one has two options or HTML insertion and functions (for D3) to wrap text.
The third question is easily solved by using HTML inlining (using flex). And it’s not possible to solve the 4th one, when using html, you can use shape-outside (which probably won’t work everywhere), but when using it, you have to create additional elements and alignment through flex can no longer be done.
Here is an example with 3 lines:

How can I implement this, please tell me.

Answer 1

I think you can write code like this:

The HTML of this disgrace is here.

<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 is here.

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;
}

The result lies in the sandbox .
PS
- No, I did not fit into three lines, but I "combed" it to the maximum.
This version is much closer to the original .