Create.js/Easel.js - createjs.Bitmap() - 讓 SVG 以原始大小加載？

Question

我正在使用createjs.Bitmap將 SVG 添加到舞台上。 這是在使用 Create.js/Easel.js 框架的 Adobe Animate HTML5 Canvas 中。 該項目正在使用響應式布局。

問題是 SVG 不會相對於舞台和它周圍的其他 canvas 對象縮放。 SVG 是從 Adobe Illustrator 創建的，它在 Illustrator 中的尺寸是 151.5px 寬 X 163.7px 高。

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);

大顯示器上的“正常”視圖顯示 SVG（人臉）。 周圍的元素是canvas個對象...

並通過拖動（不是縮放...）減小瀏覽器大小后。

還嘗試過：

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

沒有區別。

奇怪的是 SVG 代碼顯示：

viewBox="0 0 151.5 163.7"

這顯示了 SVG 的正確寬度和高度，但是如果我在 JS 中加載時不對 SVG 應用任何比例，它會以巨大的尺寸加載，（幾乎占據了整個顯示器......）。

當我將格式更改為 PNG（相同尺寸）時，使用createjs.Bitmap加載的 PNG 沒有按其原始大小進行任何縮放，這是完美的。 沒有問題，當瀏覽器大小更改時，PNG 會相對於其他 Canvas 對象縮放。 為什么 SVG 不同？

我想使用 SVG，而不是 PNG。 似乎 SVG 只是在 create.js 加載時顯着放大，而沒有參考其在 SVG 視圖框中的原始大小......

那么如何讓 SVG 以其原始大小加載？

另請參閱我在 GitHub 上針對 create.js 記錄的問題

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

Answer 1

如果不附加或鏈接您的 SVG 文件，很難猜到（除了上面的一條評論）。

我假設 Adobe Illustrator（我不再擁有它）保存 SVG 和 viewBox 屬性以及高度和寬度屬性。 如果您刪除這兩個屬性並依賴瀏覽器（和 create.js）自動調整 SVG 的大小，會發生什么情況？

如果您不知道不同的 SVG aspectRatio 參數值，請查看規范：

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio