Problem to render svg with html template literal tag in Chrome

1

Live example at https://beta.observablehq.com/d/9c53868ca4ca3757

This piece of code renders a circle with Firefox but not with Chrome:

html_circle = {
  const svg = html`<svg width="60" height="60"><div>`;
  d3.select(svg)
    .append("circle")
      .attr("cx", 30)
      .attr("cy", 30)
      .attr("r", 20)
      .attr("stroke", "black")
      .attr("fill", "black");
  return svg;
}

Inspecting the generated HTML shows:

<div id="r4" dir="auto" class="observablehq" style="margin-bottom: 260px;">
  <svg width="60" height="60">
    <div></div>
    <circle cx="30" cy="30" r="20" stroke="black" fill="black"></circle>
  </svg>
</div>

Note the extra div in there.

2

Looks like the code in html is invalid:

  const svg = html`<svg width="60" height="60"><div>`;

I’m guessing that <div> here was instead aimed at being </svg>?

1 Like
3

Dooh! :flushed:

Thanks @tom.