svg - 在 SVG 的 X 轴上添加上标和下标

Question

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

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

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

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

我的第一次尝试。

<?xml version="1.0" encoding="UTF-8"?> <!-- Code that works well with x & y coordinates for all elements --> <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"?> <!-- Textbook recommended for super and subscripts, unacceptable result --> <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"?> <!-- Code that works well with minus values for dx of subscripts --> <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. 推荐的 text & tspan 元素以及 super 和 sub 的baseline-shift 值的结果

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

标签： svgtextsubscriptsuperscript

Answer 1

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

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

#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>