A way to center an SVG or raster graphic with the same code?

Question

For whatever reason, I can't seem to get Firefox to render SVGs through CreateJS. Probably a bug, but I'm willing to fallback to raster graphics. The problem is I can't position a raster graphic vs an SVG the same way using the same code. What I mean is, the code to center an SVG in my canvas is not the same as the code to center a raster graphic. I'm not sure if this is intentional or not.

For the following code snippets, width and height are the width and height of the canvas element.

This works for raster graphics, but not SVGs:

  let bounds = bitmap.getBounds();
  bitmap.regX = bounds.width / 2;
  bitmap.regY = bounds.height / 2;
  bitmap.x = width / 2;
  bitmap.y = height / 2;
  stage.update();

This works for SVGs, but not raster graphics (would need to be modified if the SVG isn't square):

  bitmap.regX = Math.min(width,height) / 2;
  bitmap.regY = Math.min(width,height) / 2;
  bitmap.x = width / 2;
  bitmap.y = height / 2;
  stage.update();

Here's an example on CodePen: https://codepen.io/CorySanin/pen/joOxMZ

Is there a simpler way to center these elements?

That answers the X of your X-Y problem, if you still want the Y, then let me know so I can reopen. — Kaiido, May 06 '19 at 13:52
Actually, I think knowing the answer to X should help me solve Y. Sounds to me like simply specifying a width and height for the SVG will not only allow it to display in Firefox, but I expect that will make positioning it work the same way as raster graphics. If that's not the case, I'll ping you to reopen. Thank you. — CoryCoolguy, May 06 '19 at 13:58

score 0 · Accepted Answer · edited May 06 '19 at 14:16

This issue here is not CreateJS, but SVG images in Firefox.

If you breakpoint the first scale function method1 and inspect the image that is loaded, it has no width or height (they are 0).

Here is a modified codepen that shows the image width (and natural width): https://codepen.io/lannymcnie/pen/GagpgP?editors=0010

EaselJS relies on image bounds to determine its own size, and it appears like Firefox has trouble with some SVG images. There may be a way to solve it by ensuring the viewbox has sizes specified on the root element, but I didn't look into it too deeply.

Because the bounds is null, an error is thrown in your code, and it exits the centering function.

A way to center an SVG or raster graphic with the same code?

1 Answers1