2

我有下一个代码

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

现在我正在使用谷歌图表，我希望它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作为上标的任何想法？

4

2 回答 2

0

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

试试这个：

var title = 'hello<tspan dy="-0.5em" font-size="0.7em">2</tspan>';
于 2013-07-18T09:01:43.760 回答
0

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

要在 SVG 中创建上标，可以查看这篇文章。如您所见，您需要 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。<div>当然，使用 HTML 标题单独制作会容易得多，但选择权在您。

于 2013-07-17T23:35:10.563 回答