我有一些这样的代码：
svg {font-family:Verdana,sans-serif;color:#000;}
.key {font-size:75%;overflow:visible;}
.caphgh {font-weight:bold;}
.keynor {font-weight:normal;}
.keysub {font-weight:normal;font-size:85%;}
.keyshf,.keyctl,.keyalt {text-anchor:end;}
.keyshf {fill:#077BC7;} /* CIE-L*ch ( 50, 47,270) blue */
.keyctl {fill:#028946;} /* CIE-L*ch ( 50, 55,150) green */
.keyalt {fill:#ED0631;} /* CIE-L*ch ( 50, 88, 30) red */
.yel {fill:#CEB46C;} /* CIE-L*ch ( 74, 40, 90) */
.non {fill:none;}
.rec {stroke:#000;stroke-width:1;}<svg class="key" x="631.5" y="253.5" width="69" height="69">
<rect class="rec yel" x="0.5" y="0.5" rx="4" ry="4" width="68" height="68"/>
<text class="caphgh" x="2.5" y="16.5">K</text>
<text class="keynor" x="2.5" y="22.5">
<tspan x="2.5" dy="14">Next</tspan>
<tspan x="2.5" dy="14">Near</tspan>
<tspan x="2.5" dy="14">Friend</tspan>
</text>
<text class="keysub" y="0.5">
<tspan class="keyshf" x="68.5" dy="12">Base</tspan>
<tspan class="keyctl" x="68.5" dy="12">Plant</tspan>
<tspan class="keyalt" x="68.5" dy="12">Jump</tspan>
</text>
</svg>问题出在最后三个 tspan 上。它们都是右对齐的，但在 Chrome 和 Firefox 中，三个中的最后一个比前两个更靠近右边缘。在 IE 11 中，这种情况不会发生。
谁能告诉我可能是什么原因？这是一个屏幕截图：
Thanks!
这是由 XML 中的空格引起的<tspan>元素。如果我们删除它，您的问题就会消失。
svg {font-family:Verdana,sans-serif;color:#000;}
.key {font-size:75%;overflow:visible;}
.caphgh {font-weight:bold;}
.keynor {font-weight:normal;}
.keysub {font-weight:normal;font-size:85%;}
.keyshf,.keyctl,.keyalt {text-anchor:end;}
.keyshf {fill:#077BC7;} /* CIE-L*ch ( 50, 47,270) blue */
.keyctl {fill:#028946;} /* CIE-L*ch ( 50, 55,150) green */
.keyalt {fill:#ED0631;} /* CIE-L*ch ( 50, 88, 30) red */
.yel {fill:#CEB46C;} /* CIE-L*ch ( 74, 40, 90) */
.non {fill:none;}
.rec {stroke:#000;stroke-width:1;}<svg class="key" x="631.5" y="253.5" width="69" height="69">
<rect class="rec yel" x="0.5" y="0.5" rx="4" ry="4" width="68" height="68"/>
<text class="caphgh" x="2.5" y="16.5">K</text>
<text class="keynor" x="2.5" y="22.5">
<tspan x="2.5" dy="14">Next</tspan>
<tspan x="2.5" dy="14">Near</tspan>
<tspan x="2.5" dy="14">Friend</tspan>
</text>
<text class="keysub" y="0.5">
<tspan class="keyshf" x="68.5" dy="12">Base</tspan><tspan
class="keyctl" x="68.5" dy="12">Plant</tspan><tspan
class="keyalt" x="68.5" dy="12">Jump</tspan>
</text>
</svg>这可能有点不直观，但是当你设置text-anchor: end in the <tspan>元素，它会覆盖所有文本，直到您更改文本位置。这发生在下一个<tspan>元素，当你改变x and dy。这样跨度之间的额外空间就成为前一个跨度的一部分<tspan>。所以你的第一行文本实际上是：
<tspan>Jump</tspan>{spaces}
这就是为什么该文本似乎向左移动了一个空格。
请注意，SVG 文档中的默认空白行为是将连续空格折叠为单个空格。
你真的不需要使用<tspan>在你的例子中。使用起来会更简单、更干净<text>元素。
svg {font-family:Verdana,sans-serif;color:#000;}
.key {font-size:75%;overflow:visible;}
.caphgh {font-weight:bold;}
.keynor {font-weight:normal;}
.keysub {font-weight:normal;font-size:85%;}
.keyshf,.keyctl,.keyalt {text-anchor:end;}
.keyshf {fill:#077BC7;} /* CIE-L*ch ( 50, 47,270) blue */
.keyctl {fill:#028946;} /* CIE-L*ch ( 50, 55,150) green */
.keyalt {fill:#ED0631;} /* CIE-L*ch ( 50, 88, 30) red */
.yel {fill:#CEB46C;} /* CIE-L*ch ( 74, 40, 90) */
.non {fill:none;}
.rec {stroke:#000;stroke-width:1;}<svg class="key" x="631.5" y="253.5" width="69" height="69">
<rect class="rec yel" x="0.5" y="0.5" rx="4" ry="4" width="68" height="68"/>
<text class="caphgh" x="2.5" y="16.5">K</text>
<g class="keynor">
<text x="2.5" y="22.5" dy="14">Next</text>
<text x="2.5" y="22.5" dy="28">Near</text>
<text x="2.5" y="22.5" dy="42">Friend</text>
</g>
<g class="keysub">
<text class="keyshf" x="68.5" y="0.5" dy="12">Base</text>
<text class="keyctl" x="68.5" y="0.5" dy="24">Plant</text>
<text class="keyalt" x="68.5" y="0.5" dy="36">Jump</text>
</g>
</svg>