大坐标SVG中多边形正常显示但文本标签缺失问题求助

问题根源 #

你的SVG使用了超大坐标值，多边形能正常渲染，但文本消失，主要原因有两个：

1. 重复的垂直翻转变换：外层drawing-svg-g已经做了一次垂直翻转（matrix(1 0 0 -1 0 1.26455846E9)），内层文本所在的<g>又叠加了一次同样的翻转，导致文本实际位置超出SVG可视范围。
2. 大数值精度丢失：浏览器处理超大坐标时，浮点精度会受限，文本渲染对精度的敏感度远高于路径图形，因此出现渲染失败。

修复步骤 #

1. 移除重复变换：删掉内层<g>的transform="matrix(1 0 0 -1 0 2528991232)"，统一用外层的变换控制垂直方向。
2. 验证坐标范围：确保文本的x、y坐标落在SVG的viewBox（9.214388E7 0 169528.0 189180.0）覆盖范围内。

修改后的代码 #

<svg id="svgcanvasEditor" width="1194" height="804" viewBox="9.214388E7 0 169528.0 189180.0">
  <g id="svgMainGroup" class="zoom-group">
    <g id="svgNewGroup" visibility="visible">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="overflow: visible;">
        <g id="drawing-svg-g" transform="matrix(1 0 0 -1 0 1.26455846E9)">
          <g>
            <polygon points="9.2259464E7,1.26449254E9 9.225948E7,1.26449869E9 9.2241272E7,1.26449869E9 9.2241256E7,1.26449254E9 9.2259464E7,1.26449254E9" stroke="blue" stroke-width="0.04%" fill="#E3E3E3">
            </polygon>
            <!-- 移除内层重复翻转，直接沿用外层变换 -->
            <text pointer-events="none" fill="blue" y="1264495616">
              <tspan text-anchor="middle" x="92250368" font-size="614.4px">HOVEDTAVLEROM</tspan>
              <tspan text-anchor="middle" x="92250368" dy="682.6666666666666" font-size="614.4px">8252</tspan>
              <tspan x="92250368" text-anchor="middle" dy="682.6666666666666" font-size="614.4px">113.75m2</tspan>
            </text>
          </g>
        </g>
      </svg>
    </g>
  </g>
</svg>

额外优化建议 #

如果还是存在精度问题，可以把所有坐标值减去基准偏移量（比如9.214388E7），将坐标范围缩小到常规数值区间，彻底规避超大数值带来的精度损耗。

内容的提问来源于stack exchange，提问作者Muhammad zubair