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

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

霞舞

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

原创

973人浏览过

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），然后计算其中心点。

Zyro AI Background Remover

Zyro推出的AI图片背景移除工具

查看详情

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中文网其它相关文章！