Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#9,257 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

@Srinidhi444 ya está trabajando en esto.

Desde el 7/10/2026.

  • #9261 de @Danyccsf — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
83/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript
Área
computer-graphics

Línea de trabajo

Empieza con la suite de pruebas de los elementos <defs> y <use> en test/unit/svg/svg_import.js y ejecuta npm test -- test/unit/svg/svg_import.js para confirmar el fallo. Sigue cómo el importador SVG gestiona preserveAspectRatio para un símbolo al que se hace referencia mediante <use>. El trabajo está terminado cuando la prueba de regresión pasa con una transformación horizontal de 2 y una transformación vertical de 1.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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);
});
Lenguaje dominante
JavaScript
Estrellas
24.1k
Forks
3.9k
Merge medio
3 d 8 h
PR fusionados (30 d)
34

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de processing/p5.js

Todos los issues de processing/p5.js

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.