在SVG路径中嵌入动态文本与居中显示-html教程-PHP中文网

在svg路径中嵌入动态文本与居中显示

本文旨在指导如何在SVG路径元素中嵌入动态文本并实现居中显示。我们将探讨使用SVG <text> 元素作为解决方案，并详细讲解 text-anchor 属性实现水平居中。同时，文章还将讨论文本定位的策略，包括如何获取合适的坐标，以及针对小尺寸路径的文本显示优化方案，确保信息传达的清晰性和用户体验。

1. SVG路径中嵌入文本的挑战

在SVG（可伸缩矢量图形）中，<path> 元素用于定义复杂的形状，如地图区域或自定义图标。开发者常常需要在这些路径内部显示动态的文本信息，例如区域名称、数值等。然而，直接在 <path> 标签内放置文本，或使用 <title> 标签，并不能满足持久显示文本的需求。<title> 标签通常作为工具提示（tooltip）使用，只有当鼠标悬停时才会显示，无法实现文本的常驻显示。

原始HTML结构中，<title> 标签被用于显示路径信息，但这仅限于鼠标悬停时的提示：

<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>

登录后复制

为了实现文本的常驻显示和动态绑定，我们需要采用SVG原生的文本渲染机制。

2. 核心解决方案：使用SVG <text> 元素

SVG提供了专门的 <text> 元素来渲染文本。通过将 <text> 元素放置在 <svg> 容器内，并为其指定 x 和 y 坐标，我们可以精确控制文本的位置。结合 text-anchor 属性，可以轻松实现文本的水平居中。

2.1 <text> 元素的基本使用与水平居中

<text> 元素通过 x 和 y 属性定义文本的起始位置。默认情况下，文本从 (x, y) 点向右对齐（text-anchor: start）。为了实现文本的水平居中，我们需要将 text-anchor 属性设置为 middle。这样，文本的中心点将对齐到指定的 x 坐标。

以下是使用 <text> 元素显示动态文本并水平居中的示例：

<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>

登录后复制

在上述代码中，我们做了以下改进：

使用 ng-container 包裹 path 和 text，以便在循环中为每个数据项渲染对应的路径和文本。
为 <text> 元素添加了 x 和 y 属性，这些值将从 item.textX 和 item.textY 动态获取。
设置 style="text-anchor: middle;" 实现文本的水平居中。
添加了 font-size 和 fill 样式，以控制文本的外观。

2.2 动态数据绑定

为了使文本内容动态化，我们需要在组件的TypeScript文件中定义数据结构，并包含文本所需的 x 和 y 坐标。

// 定义数据接口，增加文本定位坐标
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 // 假设的文本坐标
}];

登录后复制

注意： 这里的 textX 和 textY 坐标是示例值。在实际应用中，这些坐标需要根据每个路径的几何形状进行精确计算，以确保文本真正位于路径的中心。

3. 文本定位策略

精确地将文本放置在复杂SVG路径的中心是一个关键挑战。简单的 x 和 y 属性只能指定文本的基线起点。

3.1 获取文本定位坐标

对于简单的矩形或圆形，中心点计算相对容易。但对于任意形状的SVG路径，获取其几何中心（centroid）或视觉中心则需要更复杂的逻辑。

百度文心百中

百度大模型语义搜索体验中心

查看详情

建议的定位方法：

预计算并存储坐标： 最直接的方式是在 myData 接口中为每个路径预先计算并存储 textX 和 textY 坐标。这可以在数据生成时完成，或者通过离线工具辅助确定。

运行时计算（高级）：

使用 getBBox()： 在Angular组件的 ngAfterViewInit 或其他合适的生命周期钩子中，可以通过JavaScript获取SVG路径元素的边界框（bounding box），然后计算其中心点。

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]; 
  }
  // ... 其他方法 ...
}

登录后复制

在HTML中，你需要给path元素添加一个模板引用变量，例如 #pathRef。

更精确的几何中心： 对于非凸多边形或复杂路径，边界框中心可能不是视觉上的最佳中心。这可能需要更复杂的几何算法来计算真正的质心或路径的“极点”。

3.2 垂直居中调整

除了 text-anchor 用于水平居中，SVG还提供了 dominant-baseline 或 dy 属性来调整文本的垂直对齐。

dominant-baseline="middle"：尝试将文本的垂直中心与 y 坐标对齐。
dy 属性：手动调整文本的垂直偏移量。例如，dy="-0.3em" 可以将文本向上微调。

<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>

登录后复制

4. 处理小尺寸路径的文本显示

当路径非常小，无法容纳完整的文本时，直接在路径内显示文本会导致文本溢出或难以阅读。此时，可以考虑以下策略：

条件渲染： 根据路径的大小（例如，通过 item.size 属性或计算出的边界框面积），决定是否直接在路径内显示文本。
外部指示器： 对于小尺寸路径，可以在外部显示文本，并使用箭头或线条指向对应的路径。

<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>

登录后复制

注意： 上述示例中的 item.pathCenterX, item.pathCenterY, item.indicatorX, item.indicatorY 也需要通过计算或预设来获得。marker-end="url(#arrowhead)" 用于在线条末端添加箭头。

5. 注意事项与最佳实践

性能优化： 如果SVG图形包含大量路径和文本，可能会影响渲染性能。考虑使用 trackBy 函数优化 *ngFor 循环，减少不必要的DOM操作。
可访问性： 即使使用了 <text> 元素，保留 <title> 元素仍然是一个好习惯，它可以为屏幕阅读器提供额外的信息。
样式控制： 使用CSS来控制文本的字体、颜色、大小、对齐方式等，可以实现更灵活的样式管理。例如：
```
.me-svg text {
    font-family: Arial, sans-serif;
    font-size: 10px;
    fill: #333;
    /* 其他样式 */
}
```
登录后复制
响应式设计： 确保SVG的 viewBox 和 preserveAspectRatio 属性设置得当，以便在不同屏幕尺寸下保持图形和文本的正确比例和布局。
用户交互： 如果文本本身也需要响应点击事件，可以考虑将文本包裹在 <g> 元素中，或直接在 <text> 元素上添加事件监听。

总结

在SVG路径中嵌入动态文本并实现居中显示，主要依赖于SVG的 <text> 元素和 text-anchor 属性。通过精确计算文本的 x 和 y 坐标，并结合 dominant-baseline 属性，可以实现文本的良好定位。对于小尺寸路径，可以采用条件渲染和外部指示器的方式，提升用户体验。遵循上述最佳实践，将有助于构建功能强大且用户友好的SVG交互式图形。

以上就是在SVG路径中嵌入动态文本与居中显示的详细内容，更多请关注php中文网其它相关文章！