本文详细阐述了在SVG path 元素中嵌入动态文本并实现居中的方法。通过利用SVG text 元素、text-anchor 属性以及JavaScript/TypeScript的 getBBox() 方法，实现文本的精确位置控制。同时，文章还探讨了如何处理路径过小导致文本显示不佳的问题，提供了条件渲染和替代位置放置文本的策略，并结合Angular环境给出示例代码。
理解SVG中的文本显示
在svg中， 元素主要用于定义图形的轮廓。虽然可以在 内部放置
元素提供了丰富的属性来控制文本的位置、样式和对齐方式，使其成为在SVG中嵌入动态内容的理想选择。
使用 text 元素放置动态文本
元素允许我们指定文本的 x 和 y 坐标，以及通过 text-anchor 和 dominant-baseline 等属性控制文本的对齐方式。
x 属性: 指定文本块的X坐标。y 属性: 指定文本块的Y坐标。text-anchor 属性: 控制文本的水平对齐方式。常用值包括：start (默认值): 文本从 x 坐标开始。middle: 文本的中心位于 x 坐标。end: 文本的末尾位于 x 坐标。dominant-baseline 或 alignment-baseline 属性: 控制文本的垂直对齐方式。常用值包括：middle: 文本的垂直中心位于 y 坐标。central: 与 middle 类似，通常用于更精确的居中。hanging, alphabetic, ideographic 等。
结合Angular，我们可以将动态数据绑定到 元素中：
<!--{{item.title}}, {{item.size}} --> <text *ngIf="item.myCheck=='true'" [attr.x]="0" [attr.y]="0" style="text-anchor: middle; dominant-baseline: central; font-size: 10px; fill: black;" [attr.id]="'text-' + item.id"> {{item.title}}, {{item.size}}
在上面的代码中，我们为每个 path 元素添加了一个对应的 text 元素。x 和 y 属性暂时设置为0，因为它们的实际值需要通过计算得出。id 属性被添加，以便于在TypeScript中引用。
实现文本在 path 内部居中
将文本精确居中于一个不规则的SVG path 内部是一个挑战，因为 path 元素本身不提供中心坐标。最常用的解决方案是利用JavaScript/TypeScript获取 path 元素的边界框（Bounding Box），然后计算其中心点。
SVG DOM元素提供了一个 getBBox() 方法，它返回一个 SVGRect 对象，包含 x, y, width, height 等属性，描述了元素在当前用户坐标系中的最小包围矩形。
计算中心点 (cx, cy) 的步骤：
获取 path 元素的引用。调用 pathElement.getBBox() 获取边界框信息。计算中心点的 x 坐标：bbox.x + bbox.width / 2。计算中心点的 y 坐标：bbox.y + bbox.height / 2。将这些计算出的 cx 和 cy 值赋给对应 元素的 x 和 y 属性。
TypeScript/JavaScript实现示例（结合Angular）：
为了在Angular中实现这一点，我们可以在组件加载后（例如在 ngAfterViewInit 生命周期钩子中）或数据更新后执行这些计算。
import { Component, OnInit, AfterViewInit, ViewChildren, QueryList, ElementRef } from '@angular/core';interface DataInterface { id: string; text: string; title: string; size: number; myColor: string; myCheck: string; d: string;}@Component({ selector: 'app-svg-map', templateUrl: './svg-map.component.html', styleUrls: ['./svg-map.component.css']})export class SvgMapComponent implements OnInit, AfterViewInit { myData: DataInterface[] = [ { id: "IN", "text": "default", "title": "India", size: 20, "myColor": "default", "myCheck": 'true', "d": "m 736.102,436.797l0.066,0.189l-0.062,0.104l-0.123,0.016l-0.076,-0.096l-0.009,-0.112l0.07,-0.073l0.066,-0.038L736.102,436.797zM735.947,426.258l-0.057,-0.037l-0.045,0.014l-0.042,0.05l0.018,0.398l0.089,-0.186L735.947,426.258zM735.833,430.496l-0.14,-0.13l-0.018,0.234l-0.107,0.115l0.137,0.071l0.137,-0.057l-0.017,-0.085L735.833,430.496zM736.676,427.431l-0.071,-0.892l-0.221,-0.263l0.066,-0.094l0.116,-0.25l0.149,-0.077l0.107,-0.188l0.065,-0.191l0.021,-0.087l-0.162,-0.241l0.17,-0.185l-0.028,-0.103l-0.012,-0.313l-0.093,0.004l-0.294,0.167l-0.188,0.366l0.008,0.366l-0.144,0.546l0.062,0.106l-0.067,0.354l-0.151,0.166l-0.036,0.118l0.054,0.316l-0.076,0.153l-0.032,0.212l-0.005,0.525l0.043,0.061l0.122,0.095l0.029,0.219l-0.053,0.029l-0.21,0.002l-0.051,0.064l-0.101,0.229l-0.024,0.28l-0.068,0.184l-0.115,0.054l-0.092,0.163l0.072,0.114l0.045,0.328l0.261,0.511l0.091,0.075l0.062,-0.067l0.117,-0.293l0.007,-0.357l0.086,-0.313l-0.002,-0.122l-0.093,-0.065l-0.045,-0.149l0.107,-0.12l0.036,-0.127l0.191,-0.291l0.035,-0.133l-0.045,-0.594l0.193,-0.049L736.676,427.431zM748.893,381.322l-0.023,0.141l-0.081,0.097l-0.225,0.054l-0.191,0.168l-0.304,0.243l-0.244,0.194l-0.177,0.172l-0.064,0.18l0.02,0.227l0.051,0.237l0.566,0.868l-0.005,0.15l-0.179,0.042l-0.238,-0.098l-0.205,-0.14l-0.231,-0.372l-0.186,-0.111l-0.185,-0.024l-1.1,0.191l-0.233,0.054l-0.363,0.139l-0.254,0.279l-0.185,0.255l-0.19,0.103l-0.278,0.198l-0.771,0.608l-0.445,0.262l-0.291,0.096l-0.204,0.138l-0.11,0.224l-0.083,0.161l-0.024,0.395l0.051,0.486l0.11,0.31l0.059,0.065l0.009,0.091l-0.111,0.167l-0.146,0.143l-0.071,0.088l-0.065,0.442l-0.129,0.217l-0.238,0.319l-0.211,0.241l-0.331,0.187l-0.126,0.151l-0.121,0.279l-0.071,0.236l-0.004,0.085l0.038,0.075l0.138,0.083l0.167,0.08l0.08,0.125l0.011,0.151l-0.124124,0.363l-0.223,0.503l-0.255,0.398l-0.263,0.379l-0.063,0.124124l-0.236,0.465l-0.206,0.639l-0.139,0.429l-0.12,0.294l-0.148,0.013l-0.179,-0.094l-0.437,-0.125l-0.279,-0.101l-0.203,-0.091l-0.141,0.004l-0.194,0.059l-0.197,0.041l-0.117,-0.044l-0.271,-0.265l-0.083,0.03l-0.053,0.129l0.183,0.756l0.119,0.281l-0.02,0.469l-0.047,0.575l-0.07,0.627l-0.047,0.145l-0.116,0.166l-0.153,0.045l-0.139,-0.065l-0.111,0.015l-0.037,0.105l0.032,0.271l-0.136,0.31l-0.1,0.265l0.026,0.257l0.048,0.261l0.159,0.564l0.001,0.206l-0.031,0.185l-0.083,0.077l-0.143,-0.013l-0.078,0.076l-0.059,0.116l-0.161,0.427l-0.154,0.045l-0.155,-0.064l-0.232,-0.285l-0.142,-0.083l-0.09,0.005l-0.04,0.075l-0.063,0.17l-0.063,0.114l-0.155,0.1l-0.038,-0.21l-0.083,-1.092l-0.063,-0.348l-0.051,-0.483l-0.075,-0.148l-0.096,-0.265L735,397.047l-0.089,-0.097l-0.057,-0.427L734.833,396l0.001,-0.248l-0.125,-0.513l-0.122,-0.582l-0.165,0.024l-0.098,-0.141l-0.071,0.003l-0.232,0.131l-0.185,-0.043l-0.137,0.018l-0.001,0.268l0.023,0.285l-0.052,0.103l-0.362,0.334l-0.101,0.224l0.01,0.235l0.045,0.314l-0.064,0.16l-0.157,0.147l-0.211,0.077l-0.186,-0.036l-0.119,-0.128l-0.111,-0.326l-0.099,-0.178l-0.104,-0.042l-0.081,0.048l-0.011,0.205l0.006,0.169l-0.026,0.019l-
以上就是SVG路径中动态文本的居中与适配：教程与实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1581250.html
微信扫一扫 
支付宝扫一扫 
