Принцип переноса текста в svg?

161

09 марта 2019, 00:10

В svg нет тэга br и для переноса используются атрибуты тэга x и dy

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

А какой принцип действия у этих атрибутов?
Есть ли другие варианты переноса текста, какой нибудь аналог br?

Answer 1

Аналогом <br> в SVG является тег - <tspan>, который размещается внутри <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" - абсолютные координаты начала текста, рассчитывается от начала координат исходного svg

"dx", "dy" - относительные координаты, задают сдвиг, перенос части текста.

К <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>

Используя координаты x и y для абсолютного позиционирования букв в слове, можно получить интересные результаты.

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

Здесь координаты указаны парами для каждой буквы

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

Ещё один способ использования <tspan> - размещение внутри него символов Юникода. Атрибуты "dx" и "dy" используются для взаимного, относительного позиционирования элементов.

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

Связанная тема: page-break-inside для SVG g тэгов?