fix(Vectorizer): handle nested SVG in getRelativeTransformation() (clientIO#3176)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: kumilingus

packages/joint-core/src/V/transform.mjs

@@ -109,6 +109,25 @@ export function matrixToTransformString(matrixInit = {}) {
     return `matrix(${a},${b},${c},${d},${e},${f})`;
 }
 
+/**
+ * @param {SVGElement} node
+ * @returns {SVGSVGElement|null}
+ * @description Returns the root SVG element for the given node,
+ * walking up through nested SVG elements.
+ * Returns `null` if the node is not part of an SVG document.
+ */
+function getRootSVG(node) {
+    let svg = node.ownerSVGElement;
+    if (!svg) {
+        // The node itself may be an <svg> element
+        return node instanceof SVGSVGElement ? node : null;
+    }
+    while (svg.ownerSVGElement) {
+        svg = svg.ownerSVGElement;
+    }
+    return svg;
+}
+
 /**
  *
  * @param {SVGElement} a
@@ -119,9 +138,12 @@ export function matrixToTransformString(matrixInit = {}) {
  * in order to calculate the correct transformation matrix.
  */
 export function getRelativeTransformation(a, b) {
-    // Different SVG elements, no transformation possible
-    // Note: SVGSVGElement has no `ownerSVGElement`
-    if ((a.ownerSVGElement || a) !== (b.ownerSVGElement || b)) return null;
+    // Elements must be part of an SVG document
+    const rootA = getRootSVG(a);
+    const rootB = getRootSVG(b);
+    if (!rootA || !rootB) return null;
+    // Different SVG documents, no transformation possible
+    if (rootA !== rootB) return null;
     // Get the transformation matrix from `a` to `b`.
     const am = b.getScreenCTM();
     if (!am) return null;

packages/joint-core/test/vectorizer/vectorizer.js

@@ -1720,6 +1720,42 @@ QUnit.module('vectorizer', function(hooks) {
             rect.remove();
         });
 
+        QUnit.test('nested SVG elements', function(assert) {
+
+            // SVG > g(A) > g > nested SVG > g > rect(B)
+            var elA = V('g', { id: 'outer-g', transform: 'translate(10, 20)' });
+            var elB = V('rect', { id: 'inner-rect', width: 10, height: 10 });
+            var nestedSvg = V('svg', { id: 'nested-svg', x: '30', y: '40' });
+            var innerGroup = V('g', { id: 'inner-g', transform: 'translate(5, 5)' });
+
+            innerGroup.append(elB);
+            nestedSvg.append(innerGroup);
+            var outerGroup = V('g');
+            outerGroup.append(nestedSvg);
+            elA.append(outerGroup);
+
+            var container = V(svgContainer);
+            container.append(elA);
+
+            var epsilon = 0.01;
+
+            // getTransformToElement(A, B) maps from A's coordinate space into B's.
+            // B is offset from A by nested SVG (x=30,y=40) + inner-g translate(5,5),
+            // so the transform into B's space negates that: translate(-35,-45).
+            var matrix = elA.getTransformToElement(elB.node);
+            assert.ok(matrix, 'Returns a matrix for elements across nested SVG boundary');
+            assert.ok(Math.abs(matrix.e - (-35)) < epsilon, 'Matrix tx is ~-35 (got ' + matrix.e + ')');
+            assert.ok(Math.abs(matrix.f - (-45)) < epsilon, 'Matrix ty is ~-45 (got ' + matrix.f + ')');
+
+            // Safe mode (DOM-walk based) should also return a non-null matrix across nested SVG.
+            // Note: safe mode does not account for <svg> x/y attributes, only transform attributes.
+            var safeMatrix = elA.getTransformToElement(elB.node, { safe: true });
+            assert.ok(safeMatrix, 'Safe mode returns a matrix for elements across nested SVG boundary');
+            assert.ok(Math.abs(safeMatrix.e - (-5)) < epsilon, 'Safe mode matrix tx is ~-5 (got ' + safeMatrix.e + ')');
+            assert.ok(Math.abs(safeMatrix.f - (-5)) < epsilon, 'Safe mode matrix ty is ~-5 (got ' + safeMatrix.f + ')');
+
+            elA.remove();
+        });
 
     });
 });