A possible solution to your problem is using tspan elements and the attribute baseline-shift like so:
tspan[baseline-shift]{font-size:50%;}<svg viewBox="0 0 350 40">
<text x="0" y="12">Some text with a superscript <tspan baseline-shift="super">1</tspan> and a subscript <tspan baseline-shift="sub">2</tspan>.</text>
</svg>I can not find anything about using inline HTML elements in SVG. I am
hoping to use superscript without having to use a styled<tspan>.
You can use for these purposes: foreignObject
<svg width="450" height="100">
<style type='text/css'>
svg { border: 1px solid black; }
svg div {
border: 1px dotted blue;
padding:1em;
}
</style>
<foreignObject class="node" x="16" y="22" width="400" height="100">
<body >
<div>Some text with a superscript <sup>1</sup> and a subscript <sub>2</sub></div>
</body>
</foreignObject>
</svg>Example for wrapping multi-line text in svg just like in HTML
svg {
border: 1px solid black;
}
svg div{
border: 1px dotted blue;
padding: 1em;
}<svg width="400" height="500">
<foreignObject class="node" x="46" y="22" width="200" height="500">
<body >
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. </div>
</foreignObject>
</svg>I have tried many things to get the superscript, and it is not supported the same across browsers.
For Firefox…
tspan.sup { font-size: 50%; dominant-baseline: hanging; }
For Chrome (and Inkscape)…
tspan.sup { font-size: 50%; baseline-shift: super; }
When both styles are used, Chrome will apply the baseline-shift, but it will not be entirely superscript. Inkscape will apply the baseline-shift correctly even with dominant-baseline present. It may be a case of choosing the browser you want to support.
And a non-CSS method.
<text x="0" y="14">Some text<tspan dy ="-10">1</tspan></text>
# If there is more text is after the tspan, do the following.
<text x="0" y="14">Some text<tspan dy ="-10">e</tspan> <tspan dy="10">with more text.</tspan></text>
I am wondering if there were a way to use inline HTML like <sup> and <sub> elements in SVG?
For example:
<svg>
<text x="0" y="12">Some text with a superscript <sup>1</sup> and a subscript <sub>2</sub>.</text>
</svg>
I can not find anything about using inline HTML elements in SVG. I am hoping to use superscript without having to use a styled <tspan>.
You have it right at the end i.e. use a styled tspan.
I had a feeling that I would end up having to use
You can’t do it that way cause you now have two body elements.
@Rob Of course, it could be made simpler as in the
You are assuming that I am using SVG inside HTML. I am not. I am writing independent SVG images. Also, that appears to be overkill for
@Lady Aleena You wrote that you didn’t want to use tspan. Therefore, I was looking for another solution. The answer finalized. I didn’t know how you use SVG in the future. You didn’t write it anywhere Why put a minus right away?