Add viewBox=(... ) to svg element

[RononDex]

I am wondering if it is posssible to add a viewBox=(0 0 width height) attribute to the svg element?

The reason beeing, I am having issues with svg images that have elements that extend outside of the image (as in they have negative coordinates, or extend beyond the image itself).

The external svg file that I load has the viewbox applied, but it obvously gets removed when I add the external file to the overlay node. See here for an example:

[iangilman]

Interesting! So I guess we want the view box to match the content in the viewer? We would need to watch for content changes so it could update as needed. Also I think this makes the most sense when there's a single image in the viewer... otherwise the images could be spread apart and I guess the view box would have to be the smallest rectangle that contains them all. For that reason it might make sense for this to be an option.

Anyway, seems like a good idea! Thank you for posting this. If you're interested in developing this feature, I can help point you in the right direction. Otherwise perhaps someone else will take an interest.

[RononDex]

Yeah I am interesting in trying to develop it myself. Already tried setting a viewBox using

this._svg.setAttribute("viewBox", "0 0 " + this._viewer.viewport._containerInnerSize.x + " " +  this._viewer.viewport._containerInnerSize.y);

but that did not work It seemed to crop the svg wrongly (fixed position in top left corner) and not scale / zoom anymore with the image

[iangilman]

Cool. I think the bounds you want is this._viewer.world.getHomeBounds().

[RononDex]

I don't understand how to use homeBounds for this. homeBounds is the viewport (in viewport coordinates) at home zoom? How does it help to crop out anything outside of the image?

[iangilman]

I believe getHomeBounds gives you the smallest rectangle that completely encloses all of the images in the viewport. If there's just a single image, then it's the bounds of that image. And yes, it's in viewport coordinates, which is the coordinate system the svgOverlay uses. That said, I guess the viewBox needs to be in web pixel coordinates? I suppose that's because it's outside of the transform that's zooming/scaling the rest of the contents. In that case, you would want to convert the homeBounds to viewer coordinates (using viewer.viewport.viewportToViewerElementRectangle).