RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 999274
Accepted
John
John
Asked:2020-07-04 17:46:35 +0000 UTC2020-07-04 17:46:35 +0000 UTC 2020-07-04 17:46:35 +0000 UTC

将文本添加到 SVG 格式

  • 772

如何将文本添加到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>

html
  • 3 3 个回答
  • 10 Views

3 个回答

  • Voted
  1. Stranger in the Q
    2020-07-04T18:07:41Z2020-07-04T18:07:41Z

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

    • 4
  2. Best Answer
    Alexandr_TT
    2020-07-05T02:27:06Z2020-07-05T02:27:06Z

    有很多用于样式和定位 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.主导基线

    <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 中一样,因此您必须使用 tags 使用多行文<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
  3. Alexandr_TT
    2020-07-05T03:09:46Z2020-07-05T03:09:46Z

    当一个对象足够大并且有很多小细节时,最好不要将文本信息放在地图上,例如,而是以提示的形式显示。

    要在悬停在 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>  

    数据取自维基百科

    • 2

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    根据浏览器窗口的大小调整背景图案的大小

    • 2 个回答
  • Marko Smith

    理解for循环的执行逻辑

    • 1 个回答
  • Marko Smith

    复制动态数组时出错(C++)

    • 1 个回答
  • Marko Smith

    Or and If,elif,else 构造[重复]

    • 1 个回答
  • Marko Smith

    如何构建支持 x64 的 APK

    • 1 个回答
  • Marko Smith

    如何使按钮的输入宽度?

    • 2 个回答
  • Marko Smith

    如何显示对象变量的名称?

    • 3 个回答
  • Marko Smith

    如何循环一个函数?

    • 1 个回答
  • Marko Smith

    LOWORD 宏有什么作用?

    • 2 个回答
  • Marko Smith

    从字符串的开头删除直到并包括一个字符

    • 2 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5