HTML5 Canvas - load and unload SVG dynamically?

Forum|Forum|3 years ago
April 7, 2022
1 reply
418 views

How would I load a SVG dynamically onto the stage? E.g. into a movieclip?

Then remove it when not required?

The path to the SVG is contained as a column in a MySQL database, which is not a problem in itself, and the SVGs are contained in a folder in the published directory.

This topic has been closed for replies.

F

FlatChatAuthor

Inspiring

After looking at the following:

https://community.adobe.com/t5/animate-discussions/animate-html-canvas-js-and-loading-svg-from-file/td-p/10627377

https://createjs.com/docs/preloadjs/classes/LoadQueue.html

https://stackoverflow.com/questions/25608721/unable-to-preload-and-display-svg-with-createjs

I did it the easy way with using:

var patientImage = new createjs.Bitmap("images/patient_profiles/5.svg");
stage.addChild(patientImage);

Though I may change my ways later depending on performance, but I don't see any issue with this looking ahead.

F

FlatChatAuthor

Inspiring

problem though with proportional scale of the svg to the stage:

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.patientDetailsModal.addChild(patientImage);

Looks OK initially (this is the patient image...)