Как добавить текст в SVG?

364

04 августа 2017, 00:23

Есть SVG демка https://codepen.io/anon/pen/gxMJOJ

Все блоки, как положено разделены на группы <g>, но текст описания, размещенный в <desc> не отображается:

<g id="g10">
  <title>Заголовок 10</title>
  <desc>Текст 10</desc>
    <path id="path12" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#231f20;
    stroke-width:1;stroke-linecap:butt;
    stroke-linejoin:miter;stroke-miterlimit:10;
    stroke-dasharray:none;stroke-opacity:1" 
    d="M 491.232,389.335 H 66.082 v 225.549 h 425.15 z" />
</g>

И ещё не нашёл информации как выравнивать текст внутри SVG-блока?

Answer 1

Теги <desc> ... </desc> можно добавлять в любое место svg кода. Это своего рода поясняющий текст, в котором можно разместить, что угодно, от комментарий до ссылок и всё это не будет видно пользователю на дисплее, но поисковики, особенно Google хорошо индексируют содержание в этих тегах.
Теги <title>... </title> выступают в роли тултипа. Наведите курсор на блок и должен появиться текст, который размещен в этих тегах. Тоже индексируется.
Текст добавляется в svg c помощью тегов <text> .... </text>
Внутри файла SVG позиционирование текста абсолютно при этом указывается координаты X, Y начала текста. Ваш пример я прогнал через SVG оптимизатор для уменьшения кода и лучшего понимания.

<svg  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 300 794 1123"  style="border:1px solid red;"> 
  
  <g id="g10"> 
    <title> 
      Заголовок 10 
    </title> 
    <desc> 
      Текст 10 
    </desc> 
	 <text x="200" y="360"  fill="black" font-family="Verdana, serif" font-size="24" font-weight="900"> Заголовок 10</text>  
	  
    <path id="path12" d="M491 389H66v226h425z" style="fill:#fff;stroke:#231f20"/>  
	<text x="80" y="410" fill="grey" font-size="18" font-weight="900"> Текст 10 
	<tspan dx="10">Текст 10 </tspan> 
	<tspan dx="10">Текст 10 </tspan> 
	<tspan dx="10">Текст 10 </tspan> 
	<tspan dx="10">Текст 10 </tspan> 
	<tspan dx="-400" dy="20">Текст 10 </tspan> 
	</text> 
  </g>  
   
  <g id="g11"> 
    <title> 
      Заголовок 11 
    </title> 
	 
	 
    <desc> 
      Текст 11 
    </desc> 
    <path id="path14" d="M253 470H72v138h181z" style="fill:#fff;stroke:#231f20"/> 
	 <text x="90" y="490"  fill="black" font-family="Verdana, serif" font-size="18" font-weight="900"> Заголовок 11</text>  
	  
	 <text x="80" y="520" fill="grey" font-size="18" font-weight="300"> Текст 11 Текст 11  
	<tspan dx="-130" dy="20">Текст 11 </tspan> 
	<tspan dx="0">Текст 11 </tspan> 
</text> 
  </g> 
  <g id="g12"> 
    <title> 
      Заголовок 12 
    </title> 
    <desc> 
      Текст 12 
    </desc> 
    <path id="path16" d="M482 470H261V608H482Z" style="fill:#fff;stroke:#231f20"/> 
	 
	 <text x="300" y="490"  fill="black" font-family="Verdana, serif" font-size="18" font-weight="900"> Заголовок 12</text>  
	  
	  <text x="300" y="520" fill="grey" font-size="18" font-weight="300"> Текст 12 Текст 12  
	<tspan dx="-130" dy="20">Текст 12 </tspan> 
	<tspan dx="0">Текст 12 </tspan>   
	 
	</text> 
  </g> 
</svg>

В svg нет автоматического переноса текста, как в Html поэтому приходится применять относительное позиционирование с помощью тегов <tspan> .. </tspan>, которые имеют атрибуты dxи dy относительного смещения текста по координатам.

<text x="80" y="410" fill="grey" font-size="18" font-weight="900"> Текст 10
        <tspan dx="10">Текст 10 </tspan>
        <tspan dx="10">Текст 10 </tspan>
        <tspan dx="10">Текст 10 </tspan>
        <tspan dx="10">Текст 10 </tspan>
        <tspan dx="-400" dy="20">Текст 10 </tspan>
        </text>

Позиционирование текста с помощью атрибута text-anchor

 <svg  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="200" width="200" style="border:1px solid red;"> 
  
 <line x1="100" y1="5" x2="100" y2="195" stroke="dodgerblue" /> 
 <g fill="black" font-family="Verdana, serif" font-size="24" font-weight="900"> 
  
 <text x="100" y="60"  style="text-anchor: start;"> Start </text> 
<text x="100" y="110" style="text-anchor: Middle;">  middle </text> 
<text x="100" y="160"  style="text-anchor: end;">  End </text>     
 </g> 
  
 </svg>