Clip path not working properly

[nunglert]

Dear experts,

a while ago I coded a utility class for creating a multi panel plot. I am using a clip path to cut off everything that exceeds the plot area.
The entire code is a bit messy, but the relevant part where the clip path is defined looks sth like this:

    for (let row = 0; row < this.nrows; row++) {
      for (let col = 0; col < this.ncols; col++) {

        let x0 = this.margin.left + col * (this.canvas_width + this.wspacing);
        let y0 = this.margin.top + row * (this.canvas_height + this.hspacing);

        const clipId = `clip-panel-${row}-${col}`;

        const clip_padding = 1;
        this.svg.append("clipPath")
          .attr("id", clipId)
          .append("rect")
          .attr("x", x0 + clip_padding)
          .attr("y", y0)
          .attr("width", this.canvas_width - 2 * clip_padding)
          .attr("height", this.canvas_height)

        ...

        const gData = g.append("g")
          .attr("class", "data-layer")
          .attr("clip-path", `url(#${clipId})`);

The weird thing is, that if I download the PNG or SVG from the notebook cell, I get what I expect:

However the plot is rendered incorrectly in the notebook like this:

And to make it even more weird, if I embed it into my Framework page with a js runtime, it looks like this:

Since I'm not an expert on js, I'm not sure if this is a bug or expected behavior. Are there any obvious ways to circumvent this?

Any help would be appreciated!

[Fil]

Is it a public project? Could you share a link? There's no specific reason that comes to mind as to why framework would interfere with the clip-path, but these are often brittle.

[nunglert]

Unfortunately, it's not meant to be public at the moment, but it's good to know that there is no obvious reason for the failure. I only have very limited time I can allocate for playing around with it currently. In case I find some time during thenext weeks, I will try to isolate it into a minimal example and write a quick update.
Thanks for offering your help!