fix SVG preserveAspectRatio="none" handling for <symbol>/<use>

src/shape/svg/svg_import.js

@@ -699,12 +699,26 @@ export function SVGImportAddon(p5, fn, lifecycles) {
             ? this.num(node, "height")
             : (referenced.height?.baseVal?.value || vb.height);
 
-          const scale = Math.min(w / vb.width, h / vb.height); // default: xMidYMid meet
-          this.tStack.current.translateSelf(
-            (w - vb.width * scale) / 2 - vb.x * scale,
-            (h - vb.height * scale) / 2 - vb.y * scale
-          );
-          this.tStack.current.scaleSelf(scale, scale);
+          const preserveAspectRatio = referenced.getAttribute("preserveAspectRatio");
+
+          if (preserveAspectRatio?.trim() === "none") {
+            const scaleX = w / vb.width;
+            const scaleY = h / vb.height;
+
+            this.tStack.current.translateSelf(
+              -vb.x * scaleX,
+              -vb.y * scaleY
+            );
+            this.tStack.current.scaleSelf(scaleX, scaleY);
+          } else {
+            const scale = Math.min(w / vb.width, h / vb.height); // default: xMidYMid meet
+
+            this.tStack.current.translateSelf(
+              (w - vb.width * scale) / 2 - vb.x * scale,
+              (h - vb.height * scale) / 2 - vb.y * scale
+            );
+            this.tStack.current.scaleSelf(scale, scale);
+          }
         }
         this.visit(referenced);
       });
@@ -1623,4 +1637,4 @@ export function SVGImportAddon(p5, fn, lifecycles) {
 
 if (typeof p5 !== 'undefined') {
   p5.registerAddon(SVGImportAddon);
-}
+}

test/unit/svg/svg_import.js

@@ -1134,6 +1134,43 @@ suite('<defs> and <use> elements', function () {
     });
   });
 
+  test('use respects preserveAspectRatio=none', function () {
+    const record = createSVG(`
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <symbol id="stretch" viewBox="0 0 100 100" preserveAspectRatio="none">
+            <rect x="0" y="0" width="100" height="100" />
+          </symbol>
+        </defs>
+        <use href="#stretch" width="200" height="100" />
+      </svg>
+    `);
+    const scope = firstChild(record);
+    const node = scope.children[0];
+    assert.closeTo(node.state.transform.a, 2, 0.001);
+    assert.closeTo(node.state.transform.d, 1, 0.001);
+  });
+
+  test('use with preserveAspectRatio=none accounts for viewBox origin', function () {
+    const record = createSVG(`
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <symbol id="stretch-offset" viewBox="10 20 100 100" preserveAspectRatio="none">
+            <rect x="10" y="20" width="100" height="100" />
+          </symbol>
+        </defs>
+        <use href="#stretch-offset" width="200" height="100" />
+      </svg>
+    `);
+    const scope = firstChild(record);
+    const node = scope.children[0];
+
+    assert.closeTo(node.state.transform.a, 2, 0.001);
+    assert.closeTo(node.state.transform.d, 1, 0.001);
+    assert.closeTo(node.state.transform.e, -20, 0.001);
+    assert.closeTo(node.state.transform.f, -20, 0.001);
+  });
+
   test('handles missing references gracefully', function () {
     const record = createSVG(`
       <svg xmlns="http://www.w3.org/2000/svg">

test/unit/visual/cases/svg.js

@@ -713,6 +713,16 @@ visualSuite('svg', function () {
       await screenshot();
     });
 
+    visualTest('symbol preserveAspectRatio none', async (p, screenshot) => {
+      setupDefault(p);
+      const shape = await loadFixture(
+        p,
+        'defs-symbol-preserve-aspect-ratio-none'
+      );
+      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 none/metadata.json

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