Fix facet positioning of a rendered rendered SVGSVGElement (#2219)

* Wrap any rendered SVGSVGElement in a SVGGElement

closes #2218

* use x, y instead of a wrapper
(review suggestion)

* inline template

---------

Co-authored-by: Mike Bostock <[email protected]>

docs/features/marks.md

@@ -114,7 +114,7 @@ Plot.plot({
 ```
 :::
 
-Marks may also be a function which returns an SVG element, if you wish to insert arbitrary content. (Here we use [Hypertext Literal](https://github.com/observablehq/htl) to generate an SVG gradient.)
+Marks may also be a function which returns an [SVG element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element), if you wish to insert arbitrary content. (Here we use [Hypertext Literal](https://github.com/observablehq/htl) to generate an SVG gradient.)
 
 :::plot defer https://observablehq.com/@observablehq/plot-gradient-bars
 ```js

src/facet.js

@@ -63,11 +63,16 @@ export function facetGroups(data, {fx, fy}) {
 }
 
 export function facetTranslator(fx, fy, {marginTop, marginLeft}) {
-  return fx && fy
-    ? ({x, y}) => `translate(${fx(x) - marginLeft},${fy(y) - marginTop})`
-    : fx
-    ? ({x}) => `translate(${fx(x) - marginLeft},0)`
-    : ({y}) => `translate(0,${fy(y) - marginTop})`;
+  const x = fx ? ({x}) => fx(x) - marginLeft : () => 0;
+  const y = fy ? ({y}) => fy(y) - marginTop : () => 0;
+  return function (d) {
+    if (this.tagName === "svg") {
+      this.setAttribute("x", x(d));
+      this.setAttribute("y", y(d));
+    } else {
+      this.setAttribute("transform", `translate(${x(d)},${y(d)})`);
+    }
+  };
 }
 
 // Returns an index that for each facet lists all the elements present in other

src/plot.js

@@ -317,7 +317,7 @@ export function plot(options = {}) {
           }
         }
       }
-      g?.selectChildren().attr("transform", facetTranslate);
+      g?.selectChildren().each(facetTranslate);
     }
   }