如何将文本添加到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>
为了
svg
显示文本标签<text>
,您只需将其放在图形下方,因为 元素svg
按照它们在标记中出现的顺序显示:有很多用于样式和定位 SVG 文本的属性。
许多与 css 属性匹配,如
fill
,stroke
,stroke-width
,font-sise
,font-weight
,font-family
1. 使用 text-anchor 属性定位文本
2.主导基线
3.定位多行文本的行
tspan
在 svg 中没有自动文本换行,就像在 Html 中一样,因此您必须使用 tags 使用多行文
<tspan> .. </tspan>
本行的相对定位,这些属性x
y
具有绝对文本定位dx
和dy
一行文本相对于另一行文本在坐标中的相对位移的属性.当一个对象足够大并且有很多小细节时,最好不要将文本信息放在地图上,例如,而是以提示的形式显示。
要在悬停在 svg 元素上时在工具提示中显示文本,有一个标签
<title>
要使工具提示起作用,您需要将 svg 元素包装在组标签中
<g>
以下是哈萨克斯坦地图的示例。
要显示提示,请等待地图绘制动画结束并将鼠标悬停在指示哈萨克斯坦首都位置的圆圈上或哈萨克斯坦本身的地图上,提示会有所不同。
数据取自维基百科