Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

[p5.js 2.0+ Bug Report]: SVG importer does not respect preserveAspectRatio="none" for <symbol>/<use>

未关闭 适合新手
  • 哪里不对？
#9,257 2 条评论 0 个 reaction 已指派 1 人 在 GitHub 查看

维护者通常 2 天内回复

@Danyccsf 已经在做这个了。

开始于 2026年10月8日。

  • #9261 来自 @Danyccsf —— 未关闭

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
83/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
javascript
领域
computer-graphics

调研方向

从 test/unit/svg/svg_import.js 中 <defs> 和 <use> 元素的测试套件开始，并运行 npm test -- test/unit/svg/svg_import.js 以确认失败。追踪 SVG 导入器如何处理由 <use> 引用的 symbol 的 preserveAspectRatio。当回归测试在水平变换为 2、垂直变换为 1 时通过，即表示完成。

由索引模型根据 Issue 内容生成。

描述

Area:Core p5.js 2.0+
Most appropriate sub-area of p5.js?
  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • WebGPU
  • p5.strands
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)
p5.js version

2.3.2

Web browser and version

No response

Operating system

macOS 15.7.3

Steps to reproduce this
Steps:
  1. Add the regression test below to the <defs> and <use> elements suite in test/unit/svg/svg_import.js.
  2. Run npm test -- test/unit/svg/svg_import.js.
  3. Observe that the test fails because node.state.transform.a is 1 instead of the expected 2.

The test uses a 100×100 <symbol> with preserveAspectRatio="none" inside a 200×100 <use> viewport. In this case, the expected transform is non-uniform scaling: 2× horizontally and 1× vertically.

I reproduced this on p5.js 2.3.2 (main at 7f9e0fda5). The SVG importer test suite reports 92 passing tests and this test failing with:

AssertionError: expected 1 to be close to 2 +/- 0.001

Snippet:
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);
});
主要语言
JavaScript
星标
24.1k
派生
3.9k
平均合并
3 天 19 小时
30 天内合并 PR
33

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

processing/p5.js 的其他 Issue

查看 processing/p5.js 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。