SVG being cropped at the 0,0

[leoheck]

This is a question regarding showing svg content before x,y = 0,0

I am comparing 2 svgs one over another to create something like a diff tool using existing svg files on my computer.

    <svg id="svg-id" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit;">
      <g class="my_svg-pan-zoom_viewport">
          <svg id="img-1" style="display: inline;">
              <defs>
                  <filter id="filter-1">
                      <feColorMatrix in=SourceGraphic type="matrix"
                      values="1.0  0.0  0.0  0.0  0.0
                              0.0  1.0  0.0  1.0  0.0
                              0.0  0.0  1.0  1.0  0.0
                              0.0  0.0  0.0  1.0  0.0">
                  </filter>
              </defs>
              <image id="diff-xlink-1" height="100%" width="100%" filter="url(#filter-1)"
                  onerror="this.onerror=null; imgError(this);"
                  href="${src1}" xlink:href="${src1}"/>
          </svg>
          <svg id="img-2" style="display: inline;">
              <defs>
                  <filter id="filter-2">
                      <feColorMatrix in=SourceGraphic type="matrix"
                      values="1.0  0.0  0.0  1.0  0.0
                              0.0  1.0  0.0  0.0  0.0
                              0.0  0.0  1.0  0.0  0.0
                              0.0  0.0  0.0  0.5  0.0">
                  </filter>
              </defs>
              <image id="diff-xlink-2" height="100%" width="100%" filter="url(#filter-2)"
                  onerror="this.onerror=null; imgError(this);"
                  href="${src2}" xlink:href="${src2}"/>
          </svg>
      </g>
    </svg>

This is the pan and zoom instance I am creating:

    svgpanzoom_selector = "#" + "svg-id";

    panZoom_instance = svgPanZoom(
      svgpanzoom_selector, {
        zoomEnabled: true,
        controlIconsEnabled: false,
        center: true,
        minZoom: 1,
        maxZoom: 20,
        zoomScaleSensitivity: 0.1,
        fit: false, // cannot be used, bug? (this one must be here to change the default)
        contain: true,
        viewportSelector: '.my_svg-pan-zoom_viewport',
        eventsListenerElement: document.querySelector(svgpanzoom_selector),
        onUpdatedCTM: function() {
            if (current_view == "show_sch") {
                if (sch_current_zoom != sch_old_zoom) {
                    console.log(">> Restoring SCH pan and zoom");
                    panZoom_instance.zoom(sch_current_zoom);
                    panZoom_instance.pan(sch_current_pan);
                    sch_old_zoom = sch_current_zoom;
                }
            }
            else {
                if (pcb_current_zoom != pcb_old_zoom) {
                    console.log(">> Restoring PCB pan and zoom");
                    panZoom_instance.zoom(pcb_current_zoom);
                    panZoom_instance.pan(pcb_current_pan);
                    pcb_old_zoom = pcb_current_zoom;
                }
            }
        }
    });

    console.log("panZoom_instance:", panZoom_instance);

    embed.addEventListener('load', lastEventListener);

    document.getElementById('zoom-in').addEventListener('click', function(ev) {
        ev.preventDefault();
        panZoom_instance.zoomIn();
        panZoom_instance.center();
    });

    document.getElementById('zoom-out').addEventListener('click', function(ev) {
        ev.preventDefault();
        panZoom_instance.zoomOut();
        panZoom_instance.center();
    });

    document.getElementById('zoom-fit').addEventListener('click', function(ev) {
        ev.preventDefault();
        panZoom_instance.resetZoom();
        panZoom_instance.center();
    });

    return embed;
}

Using this I was not able to display svg images that are out of the page/viewbox boundary.
I tried to add a a transform group with translation after the <g class="my_svg-pan-zoom_viewport"> but it did not work.

Something weird I found is that when the browser is full screen, or big enough, the svg is cropped on 0,0 so it does not show things that were placed before this point. But if I reduce the browser by splitting the screen... the missing data is now displayed...

Is there any way to fix or workaround having the image being cropped at the 0,0? I am probably doing something nasty since I am not a js/html expert.

For instance, this is one of the svg files I am displaying. There is a square before the origin (top, right). This is a screenshot of Inkscape.

When then the browser is big/fullscreen this is what I see. Not the missing rectangle

If I reduce the size of the browser the cropped image changes, so it is possible to see the whole content as it is possible to see here.

I would appreciate any idea that helps me display the whole svg image.

If this helps understand the issue, here is the header of one of my svg files

[leoheck]

In short, the viewport is always starting on 0,0. There is no way of having it starting before. But for some reason, when I resize the browser by reducing its size the whole image is displayed. I tried hundreds of workarounds but no one could help me here.

Actually, I could make it show the whole content of the svg when doing this the following trick...
This somehow works, but the zoom changes, and the images get small and off-center and I have to zoom in back again...

    sizes = panZoom_instance.getSizes()

    var x = -100; 
    var y = -100; 
    var w = sizes.viewBox.width  + x;
    var h = sizes.viewBox.height + y;

    var img1 = document.getElementById('diff-xlink-1');
    img1.href.baseVal = img1.href.baseVal + `#svgView(viewBox(${x}, ${y}, ${w}, ${h}))`

    var img2 = document.getElementById('diff-xlink-2');
    img2.href.baseVal = img2.href.baseVal + `#svgView(viewBox(${x}, ${y}, ${w}, ${h}))`