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>