0

how is it possible to create a text inside a SVG with mixed appearances? I would like to generate the text in the JavaScript and not in the text element. This is because there are not always values to display. The temperature values are updated via websocket. These updates have to be shown in an SVG image.

I tried the following. A text element inside the SVG:

<svg height="100%" width="100%">
    <text id="temp" x="2609" y="1480" fill="orange" font-family="Arial" font-size="40" text-anchor="middle">-</text>
</svg>

The JavaScript which manipulates the text:

document.getElementById("temp").innerHTML = "T" + "heat".sub() + " = " + valcache[3] + " °C";

In this case I get (inside the SVG Image):

T = 19 °C

Like you see, the subscript is cut off. When I use a p element instead of a text element in the HTML part the string is displayed correct but below the SVG image.

Another possibility was:

document.getElementById("temp").textContent = "T" + "heat".sub() + " = " + valcache[3] + " °C";

The result is the raw HTML string:

T<sub>heat</sub> = 19 °C

If it helps, JQuery is already used in the code.

It would be great if you could help me. Thank you in advance for your answers!

E.Mtt
  • 69
  • 1
  • 9
  • Thank you for the hint. There are overlaps with this thread, but I would like to generate the text in the JavaScript and not in the text element. This is because there are not always values to display. – E.Mtt Jun 27 '17 at 05:56
  • You just need to generate the `` elements with Javascript. There are many examples of how to do that here on Stack Overflow, and elsewhere on the web. [Here for example](https://stackoverflow.com/questions/3492322/javascript-createelement-and-svg) – Paul LeBeau Jun 27 '17 at 06:18
  • OK, I will try it. Thank you! – E.Mtt Jun 27 '17 at 07:38

0 Answers0