Trying to "stream" an SVG graph from htmx

[kylewilt]

I'm attempting to load an SVG graph in parts over time by rendering polyline nodes and appending to the points attribute of them from htmx polling requests. I have two questions:

First, is there a means already available to append to values within attributes in this way in htmx? I could not find one. I made a one off extension to achieve that effect for the time being.

Secondly, at the moment whenever my SVG is updated the browser is not re-rendering the SVG with the new content. The browser debugging tools show the new content is present however. A potentially important detail is that the SVG I'm updating is nested within another one which is the "topmost" SVG in the tree before it hits other html nodes. On each request I see the browser (chrome) "flash" the inner SVG node to indicate it changed in some way but the topmost SVG is not flashing. I don't know if that's relevant.

Thanks in advance.

[kylewilt]

Update. I was able to get the rendering problem resolved by having my "one off extension" return all of the elements I modified in it in an array. I haven't really found any comprehensive documentation on writing extensions. Looking at the examples and the source hasn't been terribly fruitful so far.

So the only outstanding question I have at the moment is my first one.

[kylewilt]

Another update. It's worth noting to anyone who may be trying to update SVGs that htmx currently doesn't properly support SVG in that if you try to replace SVG nodes they will appear in the DOM but not actually work correctly. This is due to the fact that SVG nodes use a different namespaceURI than the html nodes do. Htmx currently parses all content assuming it's text/html. When the parser it uses does this, all nodes get the namespaceURI for html regardless of any namespace provided in the elements. For now I have modified my copy of htmx in the makeFragment function to include support for a few SVG elements I'm using for hx-swap-oob elements. I also slightly modified the parseHTML function to take some additional arguments to support this.

[jmcudd]

I would love to see a PR, doesn't look like you have a public fork.

[kylewilt]

Yeah I don't have a real fork in place at all. I only have some local changes after downloading the raw js file. I would call my changes at this point a hack at best. I'm working on a POC that will potentially turn into something more which will then prompt me to potentially make this more "real".

If you'd like to see the nature of the changes and where I put them for my POC I'm happy to share in an adhoc fashion.

[decg-builder]

Had the same issue when trying a <div hx-swap-oob> with SVG content in the div.

Looking at the source htmx.js around function makeFragment(response) leads me to believe it might work if the svg content to swap in is in an <svg> tag. I got this to work, just in case that helps you:

templ featureSVG(f Feature) {
	<circle cx={ f.svgX() } cy={ f.svgY() } r="40" fill="red"></circle>
	<text x={ f.svgX() } y={ f.svgY() } font-size="20" text-anchor="middle" alignment-baseline="middle">
		{ f.Name }
	</text>
}

templ addFeatureSVG(f Feature) {
	<svg hx-swap-oob="beforeend:#features">
		@featureSVG(f)
	</svg>
}

[gamenerds]

Running into the same problem, @jmcudd. Perhaps this is the culprit? https://stackoverflow.com/questions/27489143/dynamic-svg-element-added-by-javascript-doesnt-work

I'm not smart enough to submit a PR (probably).

Basically replacing the entire top-level "svg" element works fine, but if you want to only add/replace children, like a single "circle" for example, the "circle" appears in dom but it isn't rendered, even if I add xmlns attribute to it.

I think, as SO page explains, some magic happens when you use createElementNS so the browser queues this element into rendering pipeline.

EDIT: it seems as @kylewilt pointed out the issue is that parseHTML only passes "text/html" as the parameter to DOMParser. But per https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString for svg elements like "circle" you want to pass "image/svg+xml". So we may need a new hx attribute like hx-parser that would allow us to pass along the intent for parser, it would have two options - "text/html" (default) and "xml". I think. Then add to docs that if we're returning partial svg (i.e. elements inside parent "svg" tag like circle, rect, text, etc.) then we must specify "xml". Otherwise, for all normal html AND for when we include the entire parent "svg" tag, "text/html" default or no specified value for hx-parser will work fine.

WORKAROUND 1: send back the entire "svg" element to client, just the problem with that is ofc that server has to re-render the entire svg (in my case, a map for a game), which is quite a lot of extra processing if you're rendering enemy player movements in "real-time" on the map. Would be nice to just be able to add/update a single circle/rectangle that represents enemy and send back to the client. Plz lmk how I can help outside of a PR.

WORKAROUND 2: create svg element client-side using createElementNS/setAttributeNS as shown here for elements (https://stackoverflow.com/questions/27489143/dynamic-svg-element-added-by-javascript-doesnt-work) and here for animations (https://web.archive.org/web/20140228202850/http://dev.opera.com/articles/view/advanced-svg-animation-techniques). Then just return <script>callToYourSvgCreationFunction()</script> from the server and let HTMX swap that into dom so it immediately executes. This way you only create the elements you need AND what you send from the server is just one/few js calls, so nothing. Here's my example:

Server-side:

svg = <script>
    add_sonar("{minimap_svg_id}", {pos.x}, {pos.y}, {radius}, {r_size/2});
</script>

return svg;

Client-side:

function add_sonar(svg_id: string, x: number, y: number, start_radius: number, end_radius: number) {
  const parent = document.getElementById(svg_id);

  const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  c.setAttributeNS(null, "cx", x.toString());
  c.setAttributeNS(null, "cy", y.toString());
  c.setAttributeNS(null, "r", start_radius.toString());
  c.setAttributeNS(null, "fill", "transparent");
  c.setAttributeNS(null, "stroke", "yellow");
  c.setAttributeNS(null, "stroke-width", "1");

  const anim_r = document.createElementNS(
    'http://www.w3.org/2000/svg', 'animate');
  anim_r.setAttributeNS(null, 'attributeName', 'r');
  anim_r.setAttributeNS(null, 'begin', 'indefinite');
  anim_r.setAttributeNS(null, 'to', end_radius.toString());
  anim_r.setAttributeNS(null, 'dur', "1s");
  anim_r.setAttributeNS(null, 'fill', 'freeze');
  c.appendChild(anim_r);

  const anim_op = document.createElementNS(
    'http://www.w3.org/2000/svg', 'animate');
  anim_op.setAttributeNS(null, 'attributeName', 'opacity');
  anim_op.setAttributeNS(null, 'begin', 'indefinite');
  anim_op.setAttributeNS(null, 'from', "0.69");
  anim_op.setAttributeNS(null, 'to', "0");
  anim_op.setAttributeNS(null, 'dur', "1s");
  anim_op.setAttributeNS(null, 'fill', 'freeze');
  c.appendChild(anim_op);

  parent?.appendChild(c);

  anim_r.beginElement();
  anim_op.beginElement();
}

[aardhex]

I thought yesterday I'd learn HTMX so I can make a UI without learning JS. Good luck with that.
Of course the first thing I tripped on was this. Huge thanks for providing debugging hints.

My solution so far is below. It's minimally tested, and I might send a patch some time later, but leaving it here for whomever might need it (in case I don't).

I modified parseHTML adding the forEach loop. With this you can send updates like:

		<svg hx-parsing-context-only=true>
		<g fill="red" hx-post="/api/handle/red" hx-swap="outerHTML">
		<polygon points="87,50 87,-50 0,-100 -87,-50 -87,50 -0,100"></polygon>
		</g>
		</svg>
		
		<div id="log" hx-swap-oob="true">Blue was clicked!</div>

Note that the update has both: html oob swap, and svh/xml in place swap.

    function parseHTML(resp, depth) {
          var parser = new DOMParser();
          var responseDoc = parser.parseFromString(resp, "text/html");

          /** @type {Element} */
          var responseNode = responseDoc.body;
          while (depth > 0) {
              depth--;
              // @ts-ignore
              responseNode = responseNode.firstChild;
          }
          if (responseNode == null) {
              // @ts-ignore
              responseNode = getDocument().createDocumentFragment();
          }

          // The `hx-parsing-context-only` attribute can be used to send any set of tags wrapped in another tag.
          // The original motivation is to allow sending SVG elements without the <svg> tag.
          // It should allow the same flexibility for MathML tags, without the <math> tag.
          //
          // Even though SVG tags are allowed in an HTML document, they are not HTML tags.
          // The <svg> tag is special. Inside the <svg> context, parser generates SVG-elements instead of HTML-elements.
          //
          // Normally, svg elements can only be sent inside <svg>, to trigger DOMParser context switch.
          // The hx-parsing-context-only attribute allows sending a top level <svg> wrapper that is removed after parsing.
          //
          // More context:
          // - https://github.com/bigskysoftware/htmx/discussions/1888
          // - https://stackoverflow.com/questions/27489143/dynamic-svg-element-added-by-javascript-doesnt-work
          // - https://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element
          forEach(responseNode.childNodes, function (element) {
              let shouldUnwrap = !!getRawAttribute(element, "hx-parsing-context-only");
              if (htmx.logger) {
                  // @ts-ignore
                  htmx.logger(element, "htmx:parsing-context", {
                      "shouldUnwrap": shouldUnwrap,
                      "objectType": Object.prototype.toString.call(responseNode)
                  });
              }
              if (shouldUnwrap) {
                  element.replaceWith(...element.childNodes);
              }
          })

          return responseNode;
      }

[Fflath]

I made an svg extension for this. https://github.com/Fflath/svg-ext

[iceHub82]

Works great! Thank you.