在 SVG 的 X 轴上添加上标和下标答案

【问题标题】：Add superscript and subscript exactly at the same X axis in SVG在 SVG 的 X 轴上添加上标和下标
【发布时间】：2019-07-12 15:35:59
【问题描述】：

我想在 SVG 中将文本的上标和下标放在同一个位置。这是数学和化学方程式的要求。在 SVG 中似乎没有这样的要求。

要求是当上标和下标放在某些文本旁边时，它们的 x 值必须相同。这些上标和下标可能出现在文本之前或之后，并且该要求适用于这两种情况。首先，我尝试使用带有 x 和 y 坐标的 SVG 元素来放置它们，效果非常好（附件 1）。但是，当以编程方式查找每个元素的 x 和 y 坐标时，就会出现问题。

然后我尝试了 element with 并应用 dx，效果也很好，但 dx 随字体大小而变化。在我尝试实施自定义解决方案之前，我想知道是否有更好的解决方案。

我附上了我使用的代码和示例图像。

我的第一次尝试。

<?xml version="1.0" encoding="UTF-8"?>  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 64 64" style="stroke-width:0;fill:black;font-size:24px;font-family:Sans-serif"> <text x="17" y="50" font-size="48px">B</text> <text x="4" y="22">A</text> <text x="43.59" y="22" font-size="36px">±</text> <text x="4" y="63">Z</text> <text x="43.59" y="63">C</text> </svg>

第二次尝试 SVG 的推荐元素 <?xml version="1.0" encoding="UTF-8"?>  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 128 128" style="stroke-width:0;fill:black;font-size:24px;font-family:Sans-serif"> <text x="1" y="64" font-size="24px" letter-spacing="-4"> <tspan baseline-shift="super" font-size="18px" >A</tspan> <tspan baseline-shift="sub" font-size="18px" text-anchor="end">Z</tspan> B <tspan baseline-shift="super" font-size="18px" >±</tspan> <tspan baseline-shift="sub" font-size="18px">C</tspan> </text> </svg> 第三次尝试对 tspan 元素使用负 dx。

<?xml version="1.0" encoding="UTF-8"?>  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 128 128" style="stroke-width:0;fill:black;font-size:24px;font-family:Sans-serif"> <text x="1" y="64" font-size="24px" letter-spacing="-4"> <tspan baseline-shift="super" font-size="18px" >A</tspan> <tspan baseline-shift="sub" dx="-10" font-size="18px" text-anchor="end">Z</tspan> B <tspan baseline-shift="super" font-size="18px" >±</tspan> <tspan baseline-shift="sub" dx="-10" font-size="18px">C</tspan> </text> </svg>

没有错误消息。预期和实际结果显示在附加图像中。
1。所有 SVG 元素的 x 和 y 坐标结果

2.结果包含推荐的文本和 tspan 元素以及 super 和 sub 的基线偏移值

3.带有文本和 tspan 并为下标减去 dx 值的结果

【问题讨论】：

听起来您使用了错误的技术，您应该改用 mathml。
这类似于我之前提出的一个问题，但这是一个纯 HTML 问题，因为这是一个 SVG 问题。 HTML 和 SVG 编码之间有一些相似之处，但这种情况下的结果会有所不同。

标签： svg text subscript superscript

【解决方案1】：

如果您继续使用 SVG，那么可能对您有用的一个建议是使用 em 单位作为您的下标和上标坐标偏移量。这样，它们将独立于您为主角设置的字体大小。

请参阅以下示例，其中两个 SVG 之间的唯一区别是 font-size CSS 设置。

#one {
  width: 250px;
  font-family: sans-serif;
  font-size: 48px;
}


#two {
  width: 250px;
  font-family: sans-serif;
  font-size: 32px;
}

<svg id="one" viewBox="0 0 64 64">
    <text x="17" y="50">B</text>
    <text x="17" y="50" font-size="0.5em" dx="-0.55em" dy="-1.2em">A</text>
    <text x="17" y="50" font-size="0.75em" dx="0.74em" dy="-0.78em">±</text>
    <text x="17" y="50" font-size="0.5em" dx="-0.55em" dy="0.55em">Z</text>
    <text x="17" y="50" font-size="0.5em" dx="1.1em" dy="0.55em">C</text>
</svg>


<svg id="two" viewBox="0 0 64 64">
    <text x="17" y="50">B</text>
    <text x="17" y="50" font-size="0.5em" dx="-0.55em" dy="-1.2em">A</text>
    <text x="17" y="50" font-size="0.75em" dx="0.74em" dy="-0.78em">±</text>
    <text x="17" y="50" font-size="0.5em" dx="-0.55em" dy="0.55em">Z</text>
    <text x="17" y="50" font-size="0.5em" dx="1.1em" dy="0.55em">C</text>
</svg>

【讨论】：

这是一个很酷的解决方案，但适用性有限。它适用于大多数符号，但不适合 U（铀）和 W（钨）等字符。对于像 Ca（钙）这样的 2 个字母符号，情况更糟。我想我仍然可以将它用于符号之前的超级/子。感谢您的宝贵时间。
我认为这个解决方案仍然是正确的方向。 ± 的 dx 值和下标 C 是现在唯一的问题。我可以使用 bbox 来获取基本符号结束的点，并以编程方式计算 ± 和 C 的 PX 值的起点。我会尝试并让你知道。
在这种情况下，字体大小与“em”有什么关系？如果 1em 等于 48px（如第一种情况），1.1em 是否意味着 52.8px？我还阅读了这篇文章“em 就是字体大小。在字体为 2in 的元素中，1em 意味着 2in。”在w3.org/Style/Examples/007/units.en.html。但是，如果我将 1.1em 替换为 52.8px，它就不会像 px 和 em 中的字体大小相关。请问这种明显的差异有很好的解释吗？
@VelusamyVelu "1.1em" 和 "52.8px" 应该给出完全相同的结果。这是一个例子。绿色和蓝色文本精确重叠。 jsfiddle.net/exna5g0h
感谢您的回复。但对不起，我对我的问题并不完全清楚。我使用 em 和 px 来设置 dx (dx='1.1em' & dx='52.8px')，发现它们不一样。我最初的问题中所述的要求需要更好的解决方案。