SVG backend is assigning same id to clipPath elements #4349

@moble originally reported the following bug in the ipython repository, but it is related to the manipulation of SVGs in matplotlib:

If you create a simple HTML file with a couple of SVG elements:

<svg width="120" height="120"
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <defs>
        <clipPath id="myClip" >
            <rect x="0" y="0" width="97" height="97" />
        </clipPath>
    </defs>
    <g clip-path="url(#myClip)">
        <rect x="0" y="0" width="100" height="100" fill="blue" />
        <circle cx="97" cy="50" r="5" fill="red"/> 
    </g>
</svg>


<svg width="120" height="120"
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <defs>
        <clipPath id="myClip" >
            <rect x="0" y="0" width="97" height="97" />
        </clipPath>
    </defs>
    <g clip-path="url(#myClip)">
        <rect x="0" y="0" width="100" height="100" fill="blue" />
        <circle cx="97" cy="50" r="5" fill="red"/> 
    </g>
</svg>

and then using the developer tools in Chrome, you delete one of the images and zoom in (or zoom out), the remaining image has a problem with the clipping paths:

Before deleting image:

After deleting image and zooming in:

The reason is that both figures share the same id attribute in their clipPath elements. This is the same issue that @moble found after plotting a couple of matplotlib figures and then removing or hiding one of them. Matplotlib currently assign the same id to their clipPath elements for figures that have the same content in its _make_id method and this causes tricky bugs in the browser.

Essentially, Firefox and Chrome behave differently depending on the complexity of the figure but this can be solved by assigning different ids to the clipPath elements in matplotlib (which is good practice anyway.)

I was suggesting to add a random value before generating ids (but maybe your tests are relying on the current behavior in some way).