[Bug?] Strange clip-path problem

Hi everyone.

So I have this strange problem, where the clip-path in the SVG is wrong due to addition of the location to the clip-path url.

I have the exact same HTML offline, where when you generate the SVG from a file:// location you get something like:

<defs id="defs-fac894">
        <g class="clips">
            <clipPath id="clipfac894xyplot" class="plotclip"><rect width="518" height="350"/></clipPath>
            ...

together with:

<g class="cartesianlayer">
        <g class="subplot xy">
            ...
            <g class="plot" transform="translate(42, 50)" clip-path="url(#clipfac894xyplot)">
            ...

But when you do the same online you get:

<defs id="defs-6f068e">
        <g class="clips">
            <clipPath id="clip6f068exyplot" class="plotclip"><rect width="518" height="350"/></clipPath>
            ...

together with:

<g class="cartesianlayer">
        <g class="subplot xy">
             ...
            <g class="plot" transform="translate(42, 50)" clip-path="url(https://www.mydomain.com#clip6f068exyplot)">
             ...

If you use .downloadImage on the original state of each plot, both images are identical. If you do this with a zoomed state, where you pass the x.range and y.range to the layout for .downloadImage the resulting image isn’t clipped correctly in the online version.

This is an image that results of the first code (used offline with file://-URL) after zooming: svg_offline.zip

This is an image that results of the latter code (used online with https://-URL) after zooming: svg_online.zip

When you change

<g class="plot" transform="translate(42, 50)" clip-path="url(https://www.mydomain.com#clip6f068exyplot)">

to

<g class="plot" transform="translate(42, 50)" clip-path="url(#clip6f068exyplot)">

(in other words: remove the location part from the url) you get the desired image.

This was tested with the current Firefox 63 as well as Firefox 52 ESR and current Microsoft Edge.

[Braintelligence]

@alexcjohnson actually I have the same problem when saving as PNG. I could just trace the cause by looking at the SVG.

[alexcjohnson]

Maybe it’s safe leaving it out in Plotly.downloadImage then?

Yes, that’s the goal (at least when downloading as SVG, I suspect we still need it to download as PNG etc). The difficulty is the way we currently stash baseUrl in the singleton drawing module (at least we do stash it https://github.com/plotly/plotly.js/commit/5887104139256934bbf554bf62685fbec62585d2 🎉). We could instead stash it with the plot (in _context or _fullLayout or something), but that would require altering every call to setClipUrl to have gd as an argument.