Inserting a Mathjax svg into an existing svg

11 views
Skip to first unread message

Jason Alexander

unread,
Nov 19, 2021, 1:15:27 PM11/19/21
to MathJax Users
I would like to dynamically generate a typeset equation as an SVG object and then insert it into an existing SVG image in a web page.  Right now, I have the following:

function insertEquation() {
let integral = MathJax.tex2svg(
String.raw`\int_{-1}^1 \sqrt{1-x^2} \, dx = \frac{1}{2}\pi`
);

//$("#span").append(integral);
let int = integral.children[0];
int.setAttribute("x", "2");
int.setAttribute("y", "2");
d3.select("#svg").append(int);
}

However, when I try to append the SVG element, I get the following error:

Uncaught DOMException: Failed to execute 'createElementNS' on 'Document': The qualified name provided ('[object SVGSVGElement]') contains the invalid name-start character '['.

I'm sure the SVG is fine, because if I uncomment the line which appends the equation to a span, it appears just fine. Could someone please help me figure out what I'm doing wrong?

Many thanks,

Jason

Jason Alexander

unread,
Nov 21, 2021, 8:09:46 AM11/21/21
to MathJax Users
Just to provide an answer for the record: it seems the problem I encountered was that the d3 append() function accepts two kinds of arguments — a constant string or a function that returns the DOM element to append.  It seems the DOMException was resulting because the object passed to append() was being interpreted as a string.  I was able to successfully append the Mathjax SVG to a prexisting SVG element using the second form of append() as follows: 

          d3.select("#svg").append( function() { return int; } );

J
Reply all
Reply to author
Forward
0 new messages