SVG路径中动态文本的居中与适配：教程与实践-html教程-PHP中文网

SVG路径中动态文本的居中与适配：教程与实践

霞舞

发布： 2025-10-05 11:50:16

原创

964人浏览过

SVG路径中动态文本的居中与适配：教程与实践

本文详细阐述了在SVG path 元素中嵌入动态文本并实现居中的方法。通过利用SVG text 元素、text-anchor 属性以及JavaScript/TypeScript的 getBBox() 方法，实现文本的精确位置控制。同时，文章还探讨了如何处理路径过小导致文本显示不佳的问题，提供了条件渲染和替代位置放置文本的策略，并结合Angular环境给出示例代码。

理解SVG中的文本显示

在svg中，<path> 元素主要用于定义图形的轮廓。虽然可以在 <path> 内部放置 <title> 标签，但它通常只作为工具提示（tooltip）显示，无法实现持久性的动态文本展示。为了在svg图形内部永久显示文本，我们需要使用专门的 <text> 元素。

<text> 元素提供了丰富的属性来控制文本的位置、样式和对齐方式，使其成为在SVG中嵌入动态内容的理想选择。

使用 text 元素放置动态文本

<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，我们可以将动态数据绑定到 <text> 元素中：

<svg id="map" class="me-svg" viewBox="10 -25 1000 870">
    <ng-container *ngFor="let item of myData">
        <path (click)="showSomePopUp(item)" 
              class="select" 
              [attr.d]="item.d"
              [attr.title]="item.title" 
              [attr.id]="item.id" 
              [attr.class]="item.myCheck=='true'?'red':null">
            <!-- <title *ngIf="item.myCheck=='true'">{{item.title}}, {{item.size}}</title> -->
        </path>

        <!-- 使用 text 元素显示动态文本 -->
        <text *ngIf="item.myCheck=='true'" 
              [attr.x]="0" [attr.y]="0"  <!-- 初始占位，后续通过JS计算 -->
              style="text-anchor: middle; dominant-baseline: central; font-size: 10px; fill: black;"
              [attr.id]="'text-' + item.id">
            {{item.title}}, {{item.size}}
        </text>
    </ng-container>
</svg>

登录后复制

在上面的代码中，我们为每个 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 值赋给对应 <text> 元素的 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.124,0.363l-0.223,0.503l-0.255,0.398l-0.263,0.379l-0.063,0.124l-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路径中动态文本的居中与适配：教程与实践的详细内容，更多请关注php中文网其它相关文章！