1

Hi there!

First of all thanks for proving this amazing observablehq platform!

I would like to do something which I think should be just a 5 liner, but I do something wrong:

I would like to

  • load an external SVG file
  • change something in there (e.g. change the fill color of the first polygon)
  • display the updated SVG

I would like to change the SVG not just apply a new CSS file, since the existing SVGs don’t make good use of classed and ID for my case.

Here is my unseccessful try:

1 Like
2 
svg = {
  const svgEl = await d3.xml('https://upload.wikimedia.org/wikipedia/commons/f/f9/Bavaria_AB_%28district%29.svg').then(d => d.documentElement)
  const mysvg = d3.select(svgEl)
  mysvg.attr('width', 400).attr('height', 400) // Just to zoom
  mysvg.select("polygon").style("fill", "yellow");
 return html`${mysvg.node()}`
}
2 Likes
3

Thanks for the super quick answer!. Great - so I missed I have to wait for the promise to resolve and second I have to make observablehq aware that the node I am returning should be interpreted as html.
That was super helpful!
Mihael.

3 Likes
4

Thanks for complementing with a text explanation :slight_smile:

3 Likes