11 views

Skip to first unread message

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

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

J

Reply all

Reply to author

Forward

0 new messages

Search

Clear search

Close search

Google apps

Main menu