Question

我有下一个代码

var title = 'hello<sup>2</sup>';

现在我正在使用google charts，我希望2显示为上标。

我得到了

hello<sup>2</sup>

标题上的代码是

<text text-anchor="start" x="148" y="52.9" font-family="Arial" font-size="14" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Hello<sup>2</sup></text>

是在svg上，现在我尝试了，下一个

var title = 'hello<text style="vertical-align: super">2</text>';

但我得到

hello<text style="vertical-align: super">2</text>

关于如何将2作为上标？

的任何想法

Answer 1

最简单的方法（如果你只是想为标题执行此操作）是创建一个单独的div，其中包含HTML中标题的文本。如果您确实希望在Google Charts中本地执行此操作，则需要编写将操纵标题svg的javascript。

要在SVG中创建上标，您可以看到this article。如您所见，您需要SVG将标题文本更改为以下内容：

<svg viewBox = "0 0 500 300" version = "1.1">
    <desc>
        Text example
    </desc>
    <g fill = "navy">
        <text x = "10" y = "25" font-size = "20">
            <tspan>
                e = mc
                <tspan baseline-shift = "super">
                    2
                </tspan>
            </tspan>
            <tspan x = "10" y = "60">
                T
                <tspan baseline-shift = "sub">
                    i+2
                </tspan>
                =T
                <tspan baseline-shift = "sub">
                    i
                </tspan>
                + T
                <tspan baseline-shift = "sub">
                    i+1
                </tspan>
            </tspan>
        </text>
    </g>
</svg>

因此，在您的情况下，您可以尝试查找标题的文本，并使用jquery操作SVG。当然，单独制作一个带有HTML标题的<div>会更容易，但选择权是你的。

Answer 2

<sup>不是有效的SVG元素。

请改为尝试：

var title = 'hello<tspan dy="-0.5em" font-size="0.7em">2</tspan>';

如何把上标谷歌图表标题？

2 个答案: