如何实现SVG文本框文本位置在Inkscape与浏览器中的一致渲染？

问题根源 #

Inkscape对shape-inside属性的渲染逻辑和Firefox、Edge这些浏览器不一样：Inkscape完全不认<text>/<tspan>的x/y属性，只看dominant-baseline来控制垂直对齐；但浏览器会优先拿<tspan>的x/y属性来定位，再结合shape-inside布局，结果两边显示就错位了。

不用手动微调的优化办法 #

1. 彻底放弃x/y属性，只用基线对齐属性 #

直接删掉所有<text>和<tspan>的x/y属性，只靠dominant-baseline（管垂直对齐）和text-anchor（管水平对齐）来定位文本块。
示例代码：

<text dominant-baseline="middle" text-anchor="middle" shape-inside="url(#textShape)">
  <tspan>你的文本内容</tspan>
</text>

这样Inkscape和浏览器都会按基线规则渲染，不会因为属性优先级打架。

2. 换用兼容性更好的排版属性替代shape-inside #

shape-inside是比较老的SVG提案，不同工具和浏览器支持得乱七八糟，不如换成更通用的方案：

• 要是沿不规则形状排文本，用<textPath>绑定路径，Inkscape和主流浏览器对这个属性的渲染逻辑基本一致；
• 要是做多行文本框，直接用Inkscape原生的<flowRoot>（流式文本容器），导出时别乱删这个元素，浏览器也能正确解析流式布局，根本不用依赖shape-inside。

3. 导出SVG时用Inkscape的优化功能自动清冗余属性 #

导出SVG的时候，选“优化SVG”选项，勾上“移除不必要的属性”，让工具自动把没用的x/y属性清掉，同时保留dominant-baseline这些关键对齐属性，省得自己手动删。

4. 用CSS强制统一渲染规则 #

在SVG里加个<style>块，全局设置文本样式，强制让浏览器忽略x/y属性：

text, tspan {
  x: auto !important;
  y: auto !important;
  dominant-baseline: inherit !important;
}

这样浏览器就会和Inkscape一样，只认基线对齐属性，不会乱读x/y。

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