Estoy usando createjs.Bitmap para agregar un SVG al escenario. Esto está en Adobe Animate HTML5 Canvas, que utiliza los marcos Create.js/Easel.js. El proyecto utiliza un diseño receptivo.

El problema es que el SVG no se escala en relación con el escenario y otros objetos de lienzo a su alrededor. El SVG se creó a partir de Adobe Illustrator y su tamaño en Illustrator es de 151,5 px de ancho X 163,7 px de alto.

 var root = this; var patientImagePath = data['patient_image_path'] patientImage = new createjs.Bitmap(patientImagePath); patientImage.x = 96; patientImage.y = 36.05; patientImage.scaleX = 0.16; patientImage.scaleY = 0.16; root.stage.addChild(patientImage);

Vista 'normal' en un monitor grande que muestra el SVG (cara de la persona). Los elementos circundantes son objetos de lienzo...

y después de reducir el tamaño del navegador arrastrando (no zoom...).

También probé:

 patientImage = new createjs.Bitmap(patientImagePath).set({scaleX: 0.16, scaleY: 0.16});

No hace diferencia.

Lo extraño es que el código SVG muestra:

viewBox="0 0 151.5 163.7"

que muestra el ancho y la altura correctos del SVG, pero si no aplico ninguna escala al SVG en carga en JS, se carga en un tamaño enorme (prácticamente ocupa todo el monitor...).

Cuando cambio el formato a PNG (mismas dimensiones), el PNG se carga con createjs.Bitmap sin ninguna escala en su tamaño original, lo cual es perfecto. No hay problemas y las escalas PNG en relación con los otros objetos de Canvas cuando se cambia el tamaño del navegador. ¿Por qué SVG es diferente?

Quiero usar SVG, no PNG. Parece que el SVG se amplía significativamente al cargar mediante create.js sin referencia a su tamaño original en el cuadro de visualización del SVG...

Entonces, ¿cómo hago para que el SVG se cargue en su tamaño original?

Vea también mi problema registrado en GitHub en esto para create.js

https://github.com/CreateJS/EaselJS/issues/1070