JSFiddle - React, Tailwind, and code Playground

JavaScript

//The SVG Container
 var svgContainer = d3.select("body").append("svg")
     .attr("width", 400)
     .attr("height", 400);

 //foreignObject
var latex_raw = "\\text{SFR}_{[\\textup{O\\ II}]}=10.10\\text{M}_{\\odot}\\ {\\text{ yr}}^{-1}";
 var latex_render_url = "http://latex.codecogs.com/gif.latex?";
 var latex_query = encodeURI(latex_raw);
 var latex = svgContainer.append("foreignObject")
     .attr({
     "x": 100,
         "y": 60,
         "width": 400,
         "height": 200,
         "requiredFeatures": "http://www.w3.org/TR/SVG11/feature#Extensibility"
 })
     .append("xhtml:body").attr({
     "margin": 0,
         "padding": 0,
         "width": 400,
         "height": 200
 })
     .append("img").attr({
     "src": latex_render_url + latex_query
 });