如何从SVG图片提取文本位置？以数字91为例（附Codepen演示）

开发者阿泽

2026-8-2

提取SVG文本位置的方法

一、直接读取文本元素的基础坐标

SVG中的<text>标签自带x和y属性，这就是文本起始位置的绝对坐标。要找数字“91”的位置，先定位到它对应的<text>元素，直接读取这两个属性值即可。

二、计算相对画布的位置百分比

已知你的SVG画布尺寸是width="595.2pt"、height="841.92pt"，把绝对坐标转换成相对百分比的公式很简单：

水平相对占比：(文本x值 ÷ SVG宽度) × 100%
垂直相对占比：(文本y值 ÷ SVG高度) × 100%

三、用JavaScript实现提取（适配你的演示逻辑）

在现有提取文本的代码基础上，扩展位置获取的逻辑就行：

// 遍历所有SVG文本元素
document.querySelectorAll('text').forEach(textEl => {
  const content = textEl.textContent.trim();
  // 定位目标数字"91"
  if (content === '91') {
    // 获取绝对坐标
    const x = parseFloat(textEl.getAttribute('x'));
    const y = parseFloat(textEl.getAttribute('y'));
    // 获取SVG画布尺寸
    const svgWidth = parseFloat(document.querySelector('svg').getAttribute('width'));
    const svgHeight = parseFloat(document.querySelector('svg').getAttribute('height'));
    
    // 计算相对位置
    const relativeX = ((x / svgWidth) * 100).toFixed(2) + '%';
    const relativeY = ((y / svgHeight) * 100).toFixed(2) + '%';
    
    console.log(`数字"91"绝对坐标：x=${x}pt，y=${y}pt`);
    console.log(`数字"91"相对位置：水平${relativeX}，垂直${relativeY}`);
  }
});