html – How to insert text into an SVG shape at an angle?

Question:

You need to insert text into this shape.

<svg width="644" height="242" viewBox="0 0 644 242" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M641 160.576L50.1905 240L2 40.4839L575.385 2L641 160.576Z" fill="#BEC8C9" fill-opacity="0.21" stroke="black" stroke-width="3"/>
</svg>

Don't quite know how to use svg. Help me please.

Answer:

Text is added using <text> tags, but it goes horizontal by default.
x and y coordinates of the first character of the text

<svg width="644" height="242" viewBox="0 0 644 242" fill="none" xmlns="http://www.w3.org/2000/svg" style="border:1px solid">
   <path d="M641 160.576L50.1905 240L2 40.4839L575.385 2L641 160.576Z" fill="#BEC8C9" fill-opacity="0.21" stroke="black" stroke-width="3" /> 

 <text x="45" y="120" font-size="24px" fill="black" >Многострочный немного длинный Text SVG </text>
 <text x="45" y="160" font-size="24px" fill="black" >Многострочный немного длинный Text SVG </text>

</svg>   

Therefore, the text must be combined into one group <g> with a figure and transformed together, then everything will be OK.

<svg width="644" height="242" viewBox="0 0 644 242" fill="none" xmlns="http://www.w3.org/2000/svg" style="border:1px solid">
 
<g transform="rotate(-15 0 55)  skewX(7) skewY(10)">
<rect stroke="black" stroke-width="3"  x="0" y="55" width="550" height="180" />
 <text x="45" y="120" font-size="24px" fill="black" >Многострочный немного длинный Text SVG </text>
 <text x="50" y="160" font-size="24px" fill="black" >Многострочный немного длинный Text SVG </text>

</g>
</svg>  
Scroll to Top