In svg there is no br tag and the attributes of tag x and dy are used for transfer

 <text> <tspan x="0" textAnchor="middle" dy="1.2em">very long text</tspan> <tspan x="0" textAnchor="middle" dy="1.2em">I would like to linebreak</tspan> </text>

And what is the principle of action for these attributes?
Are there any other options for the transfer of text, any kind of analog br ?

    1 answer 1

    The analogue of <br> in SVG is the tag - <tspan> , which is placed inside <text>

     <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="10" y="50"> <tspan x="10" dy="1em"> Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. </tspan> <tspan x="10" dy="1em"> Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. </tspan> <tspan x="10" dy="1em"> Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. </tspan> </text> </svg>

    "x", "y" - absolute coordinates of the beginning of the text, calculated from the origin of the original svg

    "dx", "dy" - relative coordinates, set the shift, the transfer of part of the text.

    • You can apply styles to <tspan> :

     <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="10" y="50" > <tspan x="10" dy="1em" fill="red"> Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. </tspan> <tspan x="10" dy="1em" fill="blue"> Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. </tspan> <tspan x="10" dy="1em" fill="green"> Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. </tspan> </text> </svg>

    • Using the x and y coordinates for absolute positioning of the letters in a word, you can get interesting results.

      <tspan font-weight="bold" fill="red" x="60 70 80 90" y="85 75 65 55"> Выше, </tspan>

    Here coordinates are given in pairs for each letter.

     <meta charset="utf-8"> <svg width="280" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <text fill="blue" font-family="Arial" font-size="16" > <tspan x="30 40 50 60 70 80 90" y="85 75 65 55 45 35 25 "> Быстрее, </tspan> <tspan font-weight="bold" fill="red" x="60 70 80 90" y="85 75 65 55"> Выше, </tspan> <tspan x="90 100 110 120 130 140 150" y="85 75 65 55 45 35 25 "> Cильнее </tspan> </text> </svg>

    • Another way to use <tspan> is to place Unicode characters inside it. Attributes "dx" and "dy" are used for mutual, relative positioning of elements.

     <svg width="600" height="400" viewBox="100 100 400 300"> <path id="pathChain" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/> <text font-size="36" font-family="Times New Roman" fill="grey" > <textPath id="result" xlink:href="#pathChain"> <tspan dx="0" > &#7441; </tspan> <tspan dx="-15"> &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15"> &#45;</tspan><tspan dx="-15"> &#7441; </tspan><tspan dx="-15"> &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15"> &#45;</tspan><tspan dx="-15"> &#7441; </tspan><tspan dx="-15"> &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15"> &#45;</tspan><tspan dx="-15"> &#7441; </tspan><tspan dx="-15"> &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15"> &#45;</tspan><tspan dx="-15"> &#7441; </tspan><tspan dx="-15"> &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15"> &#45;</tspan><tspan dx="-15"> &#7441; </tspan> <animate dur="10s" repeatCount="indefinite" attributeName="startOffset" values="1%;55%;1%"/> </textPath> </text> </svg>

    Related topic: page-break-inside for SVG g tags?