2

Как в исходник (см. ниже) SVG формата добавить текст, чтобы можно было придать оформление в качестве CSS стилей: центровка, выравнивание по вертикали, цвет, размер шрифта и т.д и т.п. (без иллюстратора и каких либо графических редакторов)?

ссылка.

    <svg xmlns="http://www.w3.org/2000/svg" width="105" height="105" viewBox="0 0 105 105">
      <defs>
        <style>
          .a {
            fill: aqua;
          }
        </style>
      </defs>
      <title>Artboard 1map</title>
      <path class="a" d="M9.53,3.07l.11.44,1.22,1.23,1.17,0,2.22.85,1.27-.2L17.43,4l.74-.13,1.17.06.45.49h1.09l.74-.56L23,4.32,24.31,6l.43,3.08,1.14.53-.75,2,.32.44.76-.43,2.16.49.39-.41.08-1.14.51-.65,1.17,0,1-1,1.43-.6.35.14,1-.31.35,1.32,3.23.61.55-.61,1.4-.08.37-.9,1.39-1,1,0,1.85-.88,1.35-1.82,1-.33.79.08.92.77,1.71.43,1.56,1.59.57,0,.45,1.16.65.05.78,1.3,1.13-.38,2,1.3,1.08-.19,1.58-1.16,1.21.19L62.73,11l.07.65-.47,1.06-.9.44-.6.89,0,1.45-.4,1,.56.92,1.3-.23,1.85,1.1.58-.14.88.29,1.21-.73,0-.84-.6.44-.62-.27-.4-1.27,1.57.16-.52-1.37.78-.87,1.19-.57,1.85.38,1.79-.45.86-.57,1.27.37,1.67-.73,1.21.33L77.33,14l1.66.27,1.42-.51,1.08.18,1.44-.41,1.76,0L85.76,13h0l.74,2.16,1.61.07.45-.1,1.11-1.33L89.52,13l.5-.29.75.15-.19,2.49-.73.41-.18.46.06,1.8-1.59,1.65.06.37.68.5-.07.59.49.3.26.62,1.93,1.42,2.07,1,1.21-.31.44.37,1.41-.26.41.22L98,26.41l-.29,1,.24.58,1.68,1.36,1.08.05.71.38.2.61-.2.86,1.43-.2,1.33,1.42.64.13L105,33h0l-.48.57-3.38,1.69.57.84-.72.86-.38,1.77.31.39.94.27.54.76-.22.87-1.3.38L98.14,43l-1.57-.19-.75.36L94.3,45l-.2,1.09-.87.24-1.18,1.08.38.88-1,.92-.78,1.43.43.85-.51.52.54.53-2.64,1.57.2.81-.26.64-.8-1.33,0-.43-.95-1.14-.89-.41,0-.73-1.2.25-2-.31-.51.45-1.05-.4-.59.8h-.58l-1.61,2.17.62.66.71.2-.53.44.47.77-.68.72.5,1.81-1.92,1.12-1.41,2.33-.65-.35-.48.21-.62-.17L73.19,63l-2.58.25.63.55-.75,1.44,1,.58.17.39L71,67.33l.09.83-.46,1.72.28.89-.6,1.39-1.92-.39L67,72.32l-.54.69-.92,0-.87.82-.79,1.72.71.56.77.14.32.69.67.1,0,.62.38.22-1.39.43-1,1.87-.58.31L63,80.46l-1.28.77.05.83-.75,1.28.17,2.6,2.48,1.43L65,89.24l-.14,1-.53.29,0,.93.74.39.15.8-.6.83-1.23.43L63,95.66l-.34.37,1.68,1.48,1,2.58-.14,1.8.54,2.61-.45.39-1.36.15h0l-1.32-.28-.53.23-.53-.34h0l-.08-2-1.15-1.56L60,99.6,58.84,99,57.45,97.2,56,97.31l0-.67-.44-.55v-.92l-.32-.42-1.19.17-.76-.56-1,.27-.46-.57-1.53-.3-.42-1.05.42-.86L50,91.32l.34-1-2-.45-.69-.93,2.2-3.09L49,84.62,46.6,83.1l-.47-.75L46.67,80l.79-1.57-.55-1.26-1.53-.86-.3-1,.13-.89-.74-2.3L44,71.66l-.42-2.54.56-1.53,0-1.33-1.71-3-.77-.46-.34.14-1.6-1.25-1.13-3.81L38,57l-.39-1.37-1.28-1.38.17-1.45.34-.38-1.27-.25-1,.88-.81,0-.19-.13.15-.48-.91-.05-.18-.61-.73-.13-.25-.41-1.6.3-.77-.46-.45.14,0-.8-.76,0-.08-2.24-.62-.42.36-.18.43-1.17L27,44.84l0-1.71-1-.79,1-.29.27-.39,1.07.79.32-.17-.52-2.42.17-1.41-1.11-.68L27,38l.12-.61-.38-.1L25.66,36h-.33l-.91.77-.33-.2L24,35.84l-1.07-.23-.72.22-1.09-1-1.07-2-.84-.77-.06-.75-.41-.51,1-1.39,0-.41L18.29,27.5l-.49-1.11-.07-1.3-1.19-.38-2.34.23-.8.52-1-.5-2.66.38-.82-1.16-1.12-.45L7.61,23,6,22.87H5.51L4.38,22l-1.87-.11-.22-1.41-.87-.58h0L.93,18.52l-.43-3L1.59,14.3l.34-.8-1.3-3,.05-.64.38-.32-.27-.9L.86,7,3,5.07l.35-.14.43.48L4,4.79l-.5-.67-.7.06-.67-.53,0-1.21,1.24-.95L4,.64,5.28.19l.45.86.88.61,2.3.71Z"/>
    </svg>

3 ответа 3

4

В svg для отображения текста тег <text>, только поместить его надо под фигурой, т.к. элементы svg отображаются в том порядке, в котором они идут в разметке:

<svg xmlns="http://www.w3.org/2000/svg"  height="100vh" viewBox="0 0 105 105">
  <defs>
    <style>
      .a {
        fill: aqua;
      }
      text {
        text-anchor: middle;
        alignment-baseline: middle;
        fill:red;
        stroke:black;
        stroke-width:0.4;
      }
    </style>
  </defs>
 
  <path class="a" d="M9.53,3.07l.11.44,1.22,1.23,1.17,0,2.22.85,1.27-.2L17.43,4l.74-.13,1.17.06.45.49h1.09l.74-.56L23,4.32,24.31,6l.43,3.08,1.14.53-.75,2,.32.44.76-.43,2.16.49.39-.41.08-1.14.51-.65,1.17,0,1-1,1.43-.6.35.14,1-.31.35,1.32,3.23.61.55-.61,1.4-.08.37-.9,1.39-1,1,0,1.85-.88,1.35-1.82,1-.33.79.08.92.77,1.71.43,1.56,1.59.57,0,.45,1.16.65.05.78,1.3,1.13-.38,2,1.3,1.08-.19,1.58-1.16,1.21.19L62.73,11l.07.65-.47,1.06-.9.44-.6.89,0,1.45-.4,1,.56.92,1.3-.23,1.85,1.1.58-.14.88.29,1.21-.73,0-.84-.6.44-.62-.27-.4-1.27,1.57.16-.52-1.37.78-.87,1.19-.57,1.85.38,1.79-.45.86-.57,1.27.37,1.67-.73,1.21.33L77.33,14l1.66.27,1.42-.51,1.08.18,1.44-.41,1.76,0L85.76,13h0l.74,2.16,1.61.07.45-.1,1.11-1.33L89.52,13l.5-.29.75.15-.19,2.49-.73.41-.18.46.06,1.8-1.59,1.65.06.37.68.5-.07.59.49.3.26.62,1.93,1.42,2.07,1,1.21-.31.44.37,1.41-.26.41.22L98,26.41l-.29,1,.24.58,1.68,1.36,1.08.05.71.38.2.61-.2.86,1.43-.2,1.33,1.42.64.13L105,33h0l-.48.57-3.38,1.69.57.84-.72.86-.38,1.77.31.39.94.27.54.76-.22.87-1.3.38L98.14,43l-1.57-.19-.75.36L94.3,45l-.2,1.09-.87.24-1.18,1.08.38.88-1,.92-.78,1.43.43.85-.51.52.54.53-2.64,1.57.2.81-.26.64-.8-1.33,0-.43-.95-1.14-.89-.41,0-.73-1.2.25-2-.31-.51.45-1.05-.4-.59.8h-.58l-1.61,2.17.62.66.71.2-.53.44.47.77-.68.72.5,1.81-1.92,1.12-1.41,2.33-.65-.35-.48.21-.62-.17L73.19,63l-2.58.25.63.55-.75,1.44,1,.58.17.39L71,67.33l.09.83-.46,1.72.28.89-.6,1.39-1.92-.39L67,72.32l-.54.69-.92,0-.87.82-.79,1.72.71.56.77.14.32.69.67.1,0,.62.38.22-1.39.43-1,1.87-.58.31L63,80.46l-1.28.77.05.83-.75,1.28.17,2.6,2.48,1.43L65,89.24l-.14,1-.53.29,0,.93.74.39.15.8-.6.83-1.23.43L63,95.66l-.34.37,1.68,1.48,1,2.58-.14,1.8.54,2.61-.45.39-1.36.15h0l-1.32-.28-.53.23-.53-.34h0l-.08-2-1.15-1.56L60,99.6,58.84,99,57.45,97.2,56,97.31l0-.67-.44-.55v-.92l-.32-.42-1.19.17-.76-.56-1,.27-.46-.57-1.53-.3-.42-1.05.42-.86L50,91.32l.34-1-2-.45-.69-.93,2.2-3.09L49,84.62,46.6,83.1l-.47-.75L46.67,80l.79-1.57-.55-1.26-1.53-.86-.3-1,.13-.89-.74-2.3L44,71.66l-.42-2.54.56-1.53,0-1.33-1.71-3-.77-.46-.34.14-1.6-1.25-1.13-3.81L38,57l-.39-1.37-1.28-1.38.17-1.45.34-.38-1.27-.25-1,.88-.81,0-.19-.13.15-.48-.91-.05-.18-.61-.73-.13-.25-.41-1.6.3-.77-.46-.45.14,0-.8-.76,0-.08-2.24-.62-.42.36-.18.43-1.17L27,44.84l0-1.71-1-.79,1-.29.27-.39,1.07.79.32-.17-.52-2.42.17-1.41-1.11-.68L27,38l.12-.61-.38-.1L25.66,36h-.33l-.91.77-.33-.2L24,35.84l-1.07-.23-.72.22-1.09-1-1.07-2-.84-.77-.06-.75-.41-.51,1-1.39,0-.41L18.29,27.5l-.49-1.11-.07-1.3-1.19-.38-2.34.23-.8.52-1-.5-2.66.38-.82-1.16-1.12-.45L7.61,23,6,22.87H5.51L4.38,22l-1.87-.11-.22-1.41-.87-.58h0L.93,18.52l-.43-3L1.59,14.3l.34-.8-1.3-3,.05-.64.38-.32-.27-.9L.86,7,3,5.07l.35-.14.43.48L4,4.79l-.5-.67-.7.06-.67-.53,0-1.21,1.24-.95L4,.64,5.28.19l.45.86.88.61,2.3.71Z"/>
  
  <text x="50" y="50">Artboard 1map</text>
</svg>

8
  • Здравствуйте! Скажите пожалуйста, а если внутри svg окажется несколько path элементов и для каждого из них нужно будет сделать отдельный текст, полагаю надо для каждого path сделать идентификатор и только потом, задавать <text x="50" y="50" id="somId">Artboard 1map</text>?? Только сейчас пришло в голову про это
    – John
    4 июл 2019 в 10:52
  • @John да, можно их добавить потом программно, а cx и cy посчитать через path.getBBox() 4 июл 2019 в 11:04
  • @StrangerintheQ что такое в этом случае х ? jsfiddle.net/longsonr/pGBuj 4 июл 2019 в 12:54
  • @MaximLensky левая верхняя координата, обрамляющего прямоугольника 4 июл 2019 в 12:59
  • @Stranger in the Q левая верхняя координата, обрамляющего прямоугольника это справедливо для всех базовых фигур svg, но для текста это наоборот нижняя левая координата первого символа слова Попробуй сделать Y="0" и текста не увидишь. Он будет выше холста. Правда, если добавишь атрибуты dominant-baseline="hanging" то только тогда увидишь текст при y="0" 4 июл 2019 в 17:32
2

Для стилизации и позиционирования текста SVG есть очень много атрибутов.
Многие совпадают с атрибутами css, такие как fill, stroke, stroke-width, font-sise, font-weight, font-family

1. Позиционирование текста с помощью атрибута 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>

2. dominant-baseline

<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
    <path d="M20,20 L180,20 M20,50 L180,50 M20,80 L180,80" stroke="grey" />
    
    <text dominant-baseline="baseline" x="30" y="20">Baseline</text>
    <text dominant-baseline="middle" x="30" y="50">Middle</text>
    <text dominant-baseline="hanging" x="30" y="80">Hanging</text>
</svg>

3. позиционирование строк многострочного текста с помощью tspan

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     viewBox="0 300 794 1123"style="border:1px solid gray;">  


  <g id="g10">
   
	 <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">
    
	 
    <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">
   
    <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> 

2

Когда объект достаточно большой и имеет много мелких деталей, то лучше наносить текстовую информацию не на карту например, а выводить в виде подсказок.

Для вывода текста в подсказке при наведении на svg элемент есть тег <title>

Чтобы подсказка заработала, необходимо обернуть svg элемент в групповой тег <g>

<g>
 <title> Подсказка информация </title>
<path> ......</path>
</g>

Ниже для примера приведена карта Казахстана.
Для вывода подсказки дождитесь конца анимации прорисовки карты и наведите курсор на окружность обозначающую место положение столицы Казахстана или на саму карту Казахстана, подсказки будут разные.

<meta charset="utf-8">
<svg width="500" height="500" viewBox="0 0 120 120"  >
<g> 
<!-- Вывод подсказки -->
<title>
Столица	Нур-Султан
Крупнейшие города	Алма-Ата, Нур-Султан, Шымкент, Караганда, Актобе, Тараз, Павлодар, Усть-Каменогорск 
Население  • Оценка (2019)	18 395 660[6] чел. 
Территория	9-я в мире
 • Всего	2 724 902[4] км²
</title>
<path id="KZ" title="Kazakhstan" class="land" transform="translate(-603 -260)" fill="none" stroke="grey" stroke-width="0.2" stroke-dasharray="395" stroke-dashoffset="395" d="M674.22,333.11L672.61,333.81L668.92,336.42L667.69,339.07L666.64,339.09L665.88,337.34L662.31,337.22L661.74,334.16L660.37,334.13L660.58,330.33L657.23,327.53L652.42,327.83L649.13,328.39L646.45,324.89L644.16,323.41L639.81,320.57L639.29,320.22L632.07,322.57L632.18,336.7L630.74,336.88L628.78,333.95L626.88,332.89L623.7,333.68L622.46,334.93L622.3,334.01L622.99,332.44L622.46,331.12L619.21,329.82L617.94,326.35L616.4,325.37L616.3,324.09L619.03,324.46L619.14,321.58L621.52,320.94L623.97,321.53L624.48,317.62L623.98,315.11L621.17,315.31L618.79,314.31L615.54,316.1L612.93,316.96L611.5,316.3L611.79,314.2L610,311.44L607.92,311.55L605.54,308.72L607.16,305.5L606.34,304.63L608.57,299.86L611.46,302.39L611.81,299.2L617.59,294.35L621.97,294.23L628.16,297.33L631.47,299.12L634.45,297.25L638.89,297.17L642.48,299.46L643.3,298.15L647.23,298.34L647.94,296.23L643.39,293.14L646.08,290.91L645.56,289.66L648.25,288.45L646.23,285.25L647.51,283.63L658,281.97L659.37,280.78L666.39,278.99L668.91,276.95L673.95,278.01L674.83,283.02L677.76,281.86L681.36,283.49L681.13,286.07L683.82,285.8L690.84,281.31L689.82,282.81L693.4,286.47L699.66,298.05L701.16,295.72L705.02,298.28L709.05,297.14L710.59,297.94L711.94,300.49L713.9,301.33L715.1,303.18L718.71,302.6L720.2,305.23L718.06,308.06L715.73,308.46L715.6,312.64L714.04,314.5L708.48,313.15L706.46,320.41L705.02,321.3L699.47,322.88L701.99,329.63L700.07,330.63L700.29,332.79L698.56,332.24L697.16,330.87L693,330.47L688.35,330.37L687.33,330.79L683.33,329.18L681.74,329.98L681.31,332.22L676.69,330.91L674.85,331.45z">
 <animate id="dash" attributeName="stroke-dashoffset" dur="4s" fill="freeze" values="395;0"/> 
<animate id="fillPath" attributeName="fill" values="white;#AFCD72" begin="dash.end" dur="1s" fill="freeze" />
</path>  
</g>
<text x="40" y="50"  font-size="12"  fill="none" stroke="none" >Казахстан 
     <animate id="fillKaz" dur="1.5s" begin="fillPath.end"  repeatCount="1"
        attributeName="fill"   values="#AFCD72;#787A78" fill="freeze" />
 </text>

<g  opacity="0"> 
<!-- Вывод подсказки -->
 <title>
  Семипалатинск (Алаш-Кала) (13 декабря 1917 — 5 марта 1920)
  Оренбург (10 июля 1919 — 5 апреля 1925)
  Кызыл-Орда (6 апреля 1925 — 2 апреля 1927)
  Алма-Ата (3 апреля 1927 — 27 декабря 1993)
  Алматы (28 декабря 1993 — 9 декабря 1997)
  Акмола (10 декабря 1997 — 5 мая 1998)
  Астана (6 мая 1998 — 22 марта 2019)
  Нур-Султан (23 марта 2019 — настоящее время)
 </title>
<circle cx="68" cy="35" r="2" fill="#787A78" stroke="none"  />
<circle cx="68" cy="35" r="0.8" fill="#787A78" stroke="white" stroke-width="0.5" />
<animate id="fillCircle" attributeName="opacity" values="0;1" begin="fillKaz.end" dur="0.8s" fill="freeze" />
</g>
 <g> 
 
 <text x="70" y="32" font-size="5"  fill="none" stroke="none"   >Нур-Султан (Астана) 
  <animate id="fillAstana" dur="1.5s" begin="fillCircle.end"  repeatCount="1"
        attributeName="fill"   values="#AFCD72;#787A78" fill="freeze" />
 </text>
</g>
</svg>  

Данные взяты из википедии

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.