本文旨在指导如何在SVG路径元素中嵌入动态文本并实现居中显示。我们将探讨使用SVG
元素作为解决方案，并详细讲解 text-anchor 属性实现水平居中。同时，文章还将讨论文本定位的策略，包括如何获取合适的坐标，以及针对小尺寸路径的文本显示优化方案，确保信息传达的清晰性和用户体验。1. SVG路径中嵌入文本的挑战
在SVG（可伸缩矢量图形）中， 元素用于定义复杂的形状，如地图区域或自定义图标。开发者常常需要在这些路径内部显示动态的文本信息，例如区域名称、数值等。然而，直接在 标签内放置文本，或使用 标签，并不能满足持久显示文本的需求。<title> 标签通常作为<a style="color:#f60; text-decoration:underline;" title="工具" href="https://www.php.cn/zt/16887.html" target="_blank">工具</a>提示（tooltip）使用，只有当鼠标悬停时才会显示，无法实现文本的常驻显示。
原始HTML结构中，
标签被用于显示路径信息，但这仅限于鼠标悬停时的提示：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="main">
<svg id="map" class="me-svg" viewBox="10 -25 1000 870">
<path (click)="showSomePopUp(item)" class="select" *ngFor="let item of myData" [attr.d]="item.d"
[attr.title]="item.title" [attr.id]="item.id" [attr.class]="item.myCheck=='true'?'red':null">
<!-- 这里的 <title> 仅作为工具提示 -->
<title *ngIf="item.myCheck=='true'">{{item.title}},
{{item.size}}</title>
</path>
</svg>
</div></pre><div class="contentsignin">登录后复制</div></div><p>为了实现文本的常驻显示和动态绑定，我们需要采用SVG原生的文本渲染机制。</p>
<h3>2. 核心解决方案：使用SVG <text> 元素</text>
</h3>
<p>SVG提供了专门的 <text> 元素来渲染文本。通过将 <text> 元素放置在 svg> 容器内，并为其指定 x 和 y 坐标，我们可以精确控制文本的位置。结合 text-anchor 属性，可以轻松实现文本的水平居中。</text></text></p>
<h4>2.1 <text> 元素的基本使用与水平居中</text>
</h4>
<p><text> 元素通过 x 和 y 属性定义文本的起始位置。默认情况下，文本从 (x, y) 点向右对齐（text-anchor: start）。为了实现文本的水平居中，我们需要将 text-anchor 属性设置为 middle。这样，文本的中心点将对齐到指定的 x 坐标。</text></p>
<p>以下是使用 <text> 元素显示动态文本并水平居中的示例：</text></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="main">
<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> 作为可访问性或额外提示 -->
<title *ngIf="item.myCheck=='true'">{{item.title}}, {{item.size}}</title>
</path>
<!-- 使用 <text> 元素显示动态文本 -->
<text *ngIf="item.myCheck=='true'"
[attr.x]="item.textX"
[attr.y]="item.textY"
style="text-anchor: middle; font-size: 10px; fill: black;">
{{item.title}}, {{item.size}}
</text>
</ng-container>
</svg>
</div></pre><div class="contentsignin">登录后复制</div></div><p>在上述代码中，我们做了以下改进：</p>
<ul>
<li>使用 ng-cont<a style="color:#f60; text-decoration:underline;" title="ai" href="https://www.php.cn/zt/17539.html" target="_blank">ai</a>ner 包裹 path 和 text，以便在循环中为每个数据项渲染对应的路径和文本。</li>
<li>为 <text> 元素添加了 x 和 y 属性，这些值将从 item.textX 和 item.textY 动态获取。</text>
</li>
<li>设置 style="text-anchor: middle;" 实现文本的水平居中。</li>
<li>添加了 font-size 和 fill 样式，以控制文本的外观。</li>
</ul>
<h4>2.2 动态数据绑定</h4>
<p>为了使文本内容动态化，我们需要在组件的TypeScript文件中定义数据结构，并包含文本所需的 x 和 y 坐标。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">// 定义数据接口，增加文本定位坐标
export interface DataInterface {
id: string;
text: string;
title: string;
size: number;
myColor: string;
myCheck: string;
d: string; // SVG path data
textX?: number; // 文本X坐标
textY?: number; // 文本Y坐标
}
// 示例数据
myData: DataInterface[] = [{
id: "IN", "text":"default", "title": "India", size: 20, "myColor": "default", "myCheck": 'true',
"d": "m 736.102,436.797...", // 完整的路径数据
"textX": 730, "textY": 400 // 假设的文本坐标
},{
id: "NP", "text":"default", "title": "Nepal", size: 70, "myColor": "default", "myCheck": 'true',
"d": "m 722.979,381.675...", // 完整的路径数据
"textX": 715, "textY": 385 // 假设的文本坐标
},{
id: "LK", "text":"default", "title": "Sri Lanka", size: 20, "myColor": "default", "myCheck": 'false',
"d": "m 700.169,435.179...", // 完整的路径数据
"textX": 705, "textY": 440 // 假设的文本坐标
}];</pre><div class="contentsignin">登录后复制</div></div><p><strong>注意：</strong> 这里的 textX 和 textY 坐标是示例值。在实际应用中，这些坐标需要根据每个路径的几何形状进行精确计算，以确保文本真正位于路径的中心。</p>
<h3>3. 文本定位策略</h3>
<p>精确地将文本放置在复杂SVG路径的中心是一个关键挑战。简单的 x 和 y 属性只能指定文本的基线起点。</p>
<h4>3.1 获取文本定位坐标</h4>
<p>对于简单的矩形或圆形，中心点计算相对容易。但对于任意形状的SVG路径，获取其几何中心（centroid）或视觉中心则需要更复杂的逻辑。</p>
<p><strong>建议的定位方法：</strong></p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/1271">
<img src="https://img.php.cn/upload/ai_manual/001/431/639/68b6db0c3e1d2589.png" alt="Pandora Avatars">
</a>
<div class="aritcle_card_info">
<a href="/ai/1271">Pandora Avatars</a>
<p>可以制作100多种独特风格的头像</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="Pandora Avatars">
<span>102</span>
</div>
</div>
<a href="/ai/1271" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="Pandora Avatars">
</a>
</div>
<ol>
<li><p><strong>预计算并存储坐标：</strong> 最直接的方式是在 myData 接口中为每个路径预先计算并存储 textX 和 textY 坐标。这可以在数据生成时完成，或者通过离线工具辅助确定。</p></li>
<li>
<p><strong>运行时计算（高级）：</strong></p>
<ul>
<li>
<p><strong>使用 getBBox()：</strong> 在Angular组件的 ngAfterViewInit 或其他合适的生命周期钩子中，可以通过JavaScript获取SVG路径元素的边界框（bounding box），然后计算其中心点。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">import { AfterViewInit, Component, ElementRef, ViewChildren, QueryList } from '@angular/core';
@Component({
selector: 'app-svg-map',
templateUrl: './svg-map.component.html',
styleUrls: ['./svg-map.component.css']
})
export class SvgMapComponent implements AfterViewInit {
@ViewChildren('pathRef') pathRefs!: QueryList<ElementRef<SVGPathElement>>;
myData: DataInterface[] = [ /* ... 您的数据 ... */ ];
ngAfterViewInit() {
this.pathRefs.forEach((pathElementRef, index) => {
const path = pathElementRef.nativeElement;
const bbox = path.getBBox(); // 获取路径的边界框
const centerX = bbox.x + bbox.width / 2;
const centerY = bbox.y + bbox.height / 2;
// 更新myData中的文本坐标
// 注意：直接修改循环中的item可能导致性能问题或视图更新问题
// 更好的做法是创建新的myData数组或使用trackBy
this.myData[index].textX = centerX;
this.myData[index].textY = centerY;
});
// 触发视图更新 (如果需要)
this.myData = [...this.myData];
}
// ... 其他方法 ...
}</pre><div class="contentsignin">登录后复制</div></div><p>在HTML中，你需要给path元素添加一个模板引用变量，例如 #pathRef。</p>
</li>
<li><p><strong>更精确的几何中心：</strong> 对于非凸多边形或复杂路径，边界框中心可能不是视觉上的最佳中心。这可能需要更复杂的几何算法来计算真正的质心或路径的“极点”。</p></li>
</ul>
</li>
</ol>
<h4>3.2 垂直居中调整</h4>
<p>除了 text-anchor 用于水平居中，SVG还提供了 dominant-baseline 或 dy 属性来调整文本的垂直对齐。</p>
<ul>
<li>dominant-baseline="middle"：尝试将文本的垂直中心与 y 坐标对齐。</li>
<li>dy 属性：手动调整文本的垂直偏移量。例如，dy="-0.3em" 可以将文本向上微调。</li>
</ul><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><text *ngIf="item.myCheck=='true'"
[attr.x]="item.textX"
[attr.y]="item.textY"
style="text-anchor: middle; dominant-baseline: middle; font-size: 10px; fill: black;">
{{item.title}}, {{item.size}}
</text></pre><div class="contentsignin">登录后复制</div></div><h3>4. 处理小尺寸路径的文本显示</h3>
<p>当路径非常小，无法容纳完整的文本时，直接在路径内显示文本会导致文本溢出或难以阅读。此时，可以考虑以下策略：</p>
<ol>
<li>
<strong>条件渲染：</strong> 根据路径的大小（例如，通过 item.size 属性或计算出的边界框面积），决定是否直接在路径内显示文本。</li>
<li>
<strong>外部指示器：</strong> 对于小尺寸路径，可以在外部显示文本，并使用箭头或线条指向对应的路径。</li>
</ol><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><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 *ngIf="item.myCheck=='true' && item.size > 50"
[attr.x]="item.textX"
[attr.y]="item.textY"
style="text-anchor: middle; dominant-baseline: middle; font-size: 10px; fill: black;">
{{item.title}}
</text>
<!-- 如果路径太小，使用箭头和外部文本指示 -->
<ng-container *ngIf="item.myCheck=='true' && item.size <= 50">
<!-- 假设您有 item.indicatorX, item.indicatorY 作为指示文本的坐标 -->
<!-- 假设您有 item.pathCenterX, item.pathCenterY 作为路径中心点用于连接线 -->
<line [attr.x1]="item.pathCenterX" [attr.y1]="item.pathCenterY"
[attr.x2]="item.indicatorX - 10" [attr.y2]="item.indicatorY"
stroke="gray" stroke-width="1" marker-end="url(#arrowhead)"></line>
<text [attr.x]="item.indicatorX" [attr.y]="item.indicatorY"
style="text-anchor: start; font-size: 8px; fill: gray;">
{{item.title}} ({{item.size}})
</text>
</ng-container>
</ng-container>
<!-- 定义箭头标记 -->
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7"
refX="0" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="gray" />
</marker>
</defs></pre><div class="contentsignin">登录后复制</div></div><p><strong>注意：</strong> 上述示例中的 item.pathCenterX, item.pathCenterY, item.indicatorX, item.indicatorY 也需要通过计算或预设来获得。marker-end="url(#arrowhead)" 用于在线条末端添加箭头。</p>
<h3>5. 注意事项与最佳实践</h3>
<ul>
<li>
<strong>性能优化：</strong> 如果SVG图形包含大量路径和文本，可能会影响渲染性能。考虑使用 trackBy 函数优化 *ngFor 循环，减少不必要的DOM操作。</li>
<li>
<strong>可访问性：</strong> 即使使用了 <text> 元素，保留 <title> 元素仍然是一个好习惯，它可以为屏幕阅读器提供额外的信息。
样式控制： 使用CSS来控制文本的字体、颜色、大小、对齐方式等，可以实现更灵活的样式管理。例如：.me-svg text {
font-family: Arial, sans-serif;
font-size: 10px;
fill: #333;
/* 其他样式 */
}登录后复制
总结
在SVG路径中嵌入动态文本并实现居中显示，主要依赖于SVG的 元素和 text-anchor 属性。通过精确计算文本的 x 和 y 坐标，并结合 dominant-baseline 属性，可以实现文本的良好定位。对于小尺寸路径，可以采用条件渲染和外部指示器的方式，提升用户体验。遵循上述最佳实践，将有助于构建功能强大且用户友好的SVG交互式图形。
以上就是在SVG路径中嵌入动态文本与居中显示的详细内容，更多请关注php中文网其它相关文章！
广告
803
收藏
取消收藏
