SVG backend is assigning same id to clipPath elements #4349

Closed
rsmith31415 opened this Issue Apr 18, 2015 · 3 comments

Comments

Projects
None yet
3 participants
@rsmith31415

@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:

alt text

After deleting image and zooming in:

alt text

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).

@tacaswell

This comment has been minimized.

Show comment
Hide comment
@tacaswell

tacaswell Apr 18, 2015

Member

Why is not re-using clip paths good practice? I would naively have thought that reusing them (which reduces file size) would be good practice. Never mind, I am confused.

Member

tacaswell commented Apr 18, 2015

Why is not re-using clip paths good practice? I would naively have thought that reusing them (which reduces file size) would be good practice. Never mind, I am confused.

@tacaswell tacaswell added this to the next point release milestone Apr 18, 2015

@WeatherGod

This comment has been minimized.

Show comment
Hide comment
@WeatherGod

WeatherGod Apr 18, 2015

Member

Isn't this more like a namespace collision issue? The files by themselves
are fine, but when both appear in the same document, the ids collide?
On Apr 18, 2015 1:44 AM, "Thomas A Caswell" notifications@github.com
wrote:

Why is not re-using clip paths good practice? I would naively have thought
that reusing them (which reduces file size) would be good practice.


Reply to this email directly or view it on GitHub
#4349 (comment)
.

Member

WeatherGod commented Apr 18, 2015

Isn't this more like a namespace collision issue? The files by themselves
are fine, but when both appear in the same document, the ids collide?
On Apr 18, 2015 1:44 AM, "Thomas A Caswell" notifications@github.com
wrote:

Why is not re-using clip paths good practice? I would naively have thought
that reusing them (which reduces file size) would be good practice.


Reply to this email directly or view it on GitHub
#4349 (comment)
.

@rsmith31415

This comment has been minimized.

Show comment
Hide comment
@rsmith31415

rsmith31415 Apr 18, 2015

@WeatherGod I would phrase it this way: Figures with the same content share the same id, so if you have two or more figures with the same content in the same document, then you're going to have the issue described previously.

On the contrary, if you have two figures with different content (e.g. histogram and bar plot), they won't share the same ids and the issue will be avoided even if they are in the same document.

@WeatherGod I would phrase it this way: Figures with the same content share the same id, so if you have two or more figures with the same content in the same document, then you're going to have the issue described previously.

On the contrary, if you have two figures with different content (e.g. histogram and bar plot), they won't share the same ids and the issue will be avoided even if they are in the same document.

tacaswell added a commit to tacaswell/matplotlib that referenced this issue Apr 28, 2015

BUG : fix svg corner case
Under certain conditions the ``id`` of the `clipPath` node emitted by
the svg writer will be the same for multiple files.  If both svg
fragments are embedded in the same document, then one of them is
removed, the clipping of the remaining fragment can become inconsistent.

See ipython/ipython#8133

Closes #4349

@tacaswell tacaswell self-assigned this Apr 28, 2015

@tacaswell tacaswell removed the Needs review label Apr 30, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment