向SVG路径追加text/textPath时无法调整字体大小问题

问题原因 #

你遇到的字体大小上限问题确实和SVG超大的viewBox数值直接相关：当前主流浏览器的SVG渲染引擎普遍存在内置的字体尺寸阈值，结合你1:10000的大比例单位映射，超过20000px的字体会触发渲染限制，被默认隐藏不显示。

可行解决方案 #

• 方案1：全局等比缩放坐标（优先推荐）
  将整个SVG的viewBox属性、所有path的d属性坐标值统一除以10000，对应你的绘图比例换算。比如原viewBox 900000 400000 8200000 7500000 调整为 90 40 820 750，所有路径坐标同步缩小后，字体大小就可以用常规px单位设置，比如20px对应原来的20000px，需要更大字号直接调整数值即可，既保留了原数据精度，也不会触发浏览器渲染限制。
• 方案2：给文本元素加transform缩放（无需改动原有SVG结构）
  不修改现有viewBox和路径坐标，直接给追加的text元素添加scale变换放大显示效果，代码示例如下：

var svg = d3.select("#karta")
var gline = svg.select("#g_line")
gline.append("text")
   .style("font-size", "20000px")
   .attr("transform", "scale(3)") // 缩放倍数可按需调整，3倍即等效于60000px的显示尺寸
   .append("textPath")
   .style("text-anchor", "start")
   .attr("xlink:href", "#au")
   .attr("startOffset", "3%") // 可调整起始偏移避免文字超出路径范围被截断
   .text("My text")

• 方案3：调整渲染属性（兼容性一般，作为补充选项）
  将SVG的text-rendering属性从geometricPrecision改为optimizeSpeed，部分浏览器在高精度渲染模式下的字体尺寸阈值更低，切换为速度优先模式可一定程度上放宽该限制。

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