fix: respect preserveAspectRatio meet alignment in SVG use

src/shape/svg/svg_import.js

@@ -265,7 +265,7 @@
       let matched;
       try {
         matched = svgRoot.querySelectorAll(rule.selectorText);
       } catch (err) {
         continue;
       }
 
@@ -711,11 +711,20 @@
             );
             this.tStack.current.scaleSelf(scaleX, scaleY);
           } else {
-            const scale = Math.min(w / vb.width, h / vb.height); // default: xMidYMid meet
+            const scale = Math.min(w / vb.width, h / vb.height);
+
+            // Default SVG alignment is xMidYMid meet.
+            const alignment = preserveAspectRatio?.trim().split(/\s+/)[0] || "xMidYMid";
+
+            const alignX = alignment.startsWith("xMin") ? 0
+              : alignment.startsWith("xMax") ? 1 : 0.5;
+
+            const alignY = alignment.endsWith("YMin") ? 0
+              : alignment.endsWith("YMax") ? 1 : 0.5;
 
             this.tStack.current.translateSelf(
-              (w - vb.width * scale) / 2 - vb.x * scale,
-              (h - vb.height * scale) / 2 - vb.y * scale
+              (w - vb.width * scale) * alignX - vb.x * scale,
+              (h - vb.height * scale) * alignY - vb.y * scale
             );
             this.tStack.current.scaleSelf(scale, scale);
           }

test/unit/svg/svg_import.js

@@ -1151,6 +1151,95 @@ suite('<defs> and <use> elements', function () {
     assert.closeTo(node.state.transform.d, 1, 0.001);
   });
 
+  test('use respects preserveAspectRatio=xMinYMin meet', function () {
+    const record = createSVG(`
+    <svg xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <symbol id="left" viewBox="0 0 100 100"
+                preserveAspectRatio="xMinYMin meet">
+          <rect x="0" y="0" width="100" height="100" />
+        </symbol>
+      </defs>
+      <use href="#left" width="200" height="100" />
+    </svg>
+  `);
+
+    const scope = firstChild(record);
+    const node = scope.children[0];
+
+    assert.closeTo(node.state.transform.a, 1, 0.001);
+    assert.closeTo(node.state.transform.d, 1, 0.001);
+    assert.closeTo(node.state.transform.e, 0, 0.001);
+    assert.closeTo(node.state.transform.f, 0, 0.001);
+  });
+
+  const meetAlignments = [
+    ['xMinYMin', 0, 0],
+    ['xMidYMin', 0.5, 0],
+    ['xMaxYMin', 1, 0],
+    ['xMinYMid', 0, 0.5],
+    ['xMidYMid', 0.5, 0.5],
+    ['xMaxYMid', 1, 0.5],
+    ['xMinYMax', 0, 1],
+    ['xMidYMax', 0.5, 1],
+    ['xMaxYMax', 1, 1]
+  ];
+
+  for (const [alignment, alignX, alignY] of meetAlignments) {
+    for (const [width, height] of [[200, 100], [100, 200]]) {
+      test(`use respects ${alignment} meet in ${width}x${height}`, function () {
+        const record = createSVG(`
+        <svg xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <symbol id="aligned" viewBox="0 0 100 100"
+                    preserveAspectRatio="${alignment} meet">
+              <rect x="0" y="0" width="100" height="100" />
+            </symbol>
+          </defs>
+          <use href="#aligned" width="${width}" height="${height}" />
+        </svg>
+      `);
+
+        const node = firstChild(record).children[0];
+        const scale = Math.min(width / 100, height / 100);
+
+        assert.closeTo(node.state.transform.a, scale, 0.001);
+        assert.closeTo(node.state.transform.d, scale, 0.001);
+        assert.closeTo(
+          node.state.transform.e,
+          (width - 100 * scale) * alignX,
+          0.001
+        );
+        assert.closeTo(
+          node.state.transform.f,
+          (height - 100 * scale) * alignY,
+          0.001
+        );
+      });
+    }
+  }
+
+  test('use meet alignment accounts for viewBox origin', function () {
+    const record = createSVG(`
+    <svg xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <symbol id="offset" viewBox="10 20 100 100"
+                preserveAspectRatio="xMaxYMax meet">
+          <rect x="10" y="20" width="100" height="100" />
+        </symbol>
+      </defs>
+      <use href="#offset" width="200" height="100" />
+    </svg>
+  `);
+
+    const node = firstChild(record).children[0];
+
+    assert.closeTo(node.state.transform.a, 1, 0.001);
+    assert.closeTo(node.state.transform.d, 1, 0.001);
+    assert.closeTo(node.state.transform.e, 90, 0.001);
+    assert.closeTo(node.state.transform.f, -20, 0.001);
+  });
+
   test('use with preserveAspectRatio=none accounts for viewBox origin', function () {
     const record = createSVG(`
       <svg xmlns="http://www.w3.org/2000/svg">

test/unit/visual/cases/svg.js

@@ -723,6 +723,16 @@ visualSuite('svg', function () {
       await screenshot();
     });
 
+    visualTest('symbol preserveAspectRatio meet alignments', async (p, screenshot) => {
+      setupDefault(p);
+      const shape = await loadFixture(
+        p,
+        'defs-symbol-preserve-aspect-ratio-meet'
+      );
+      p.shape(shape);
+      await screenshot();
+    });
+
     visualTest('x and y', async (p, screenshot) => {
       setupDefault(p);
       const shape = await loadFixture(p, 'defs-use-xy');

test/unit/visual/screenshots/svg/SVG Import - defs and use/symbol preserveAspectRatio meet alignments/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}