Inserting a Mathjax svg into an existing svg

[Jason Alexander]

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]

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