Render Katex on SVG

[udaypandey]

Is it possible to render katex on top of a svg file?

I am trying to do something similar to whats been done for KA link I have shared below. How can I render Katex the same way?

Please refer the first diagram in the link below. If you inspect the first diagram, its a SVG and katex is used for writing all numbers on top of the number line SVG.

To Reproduce:
Steps to reproduce the behavior:

1. Go to https://www.khanacademy.org/math/cc-sixth-grade-math/cc-6th-negative-number-topic/cc-6th-neg-num-intro/a/intro-to-negative-numbers
2. Use Developer -> Inspect Elements to look at the details for the rendered SVG and katex rendered numbers.

Expected behavior:
A clear and concise description of what you expected to happen.

Screenshots:

[edemaine]

If you look at the subsequent <span>s after the <svg>, you'll see that the KaTeX is not inside the SVG, it's just overlapping in terms of layout. This is accomplished via position: absolute to place the KaTeX labels where wanted within the containing <div> (which is position: relative).

It's hard but possible to do this type of placement by hand, but much easier to do with a tool. In this case, Khan Academy exercise figures seem to be built with a tool called Graphie that does it, though I can't find that project so it may not be open source. (Others, feel free to give a pointer if you know one.)

[udaypandey]

@edemaine Thanks a lot for the reply. I noticed position: absolute too and also noticed graphie but could not find anything and was wondering if it was some extension of katex that allows such absolute rendering.

Thanks a lot again.