Exported to SVG charts can have the same id for clipPath and a wrong clipPath is used #5926

KacperMadej opened this Issue Nov 3, 2016 · 3 comments


None yet

3 participants



When exporting charts to SVG and then placing those SVGs into a site clipPath id is duplicated.
IE11 and Firefox are using the first clipPath and second chart is wrongly clipped.

Live demo with steps to reproduce

The two charts are exported to SVG from a simple demo with just changed height.

Affected browser(s)

IE11, Firefox


@TorsteinHonsi Is it possible for the svg to look within itself for the clipPath, in other words have a more specific rule to identify the clipPath?


The Highcharts object keeps track of the id's, so there will never be two items with the same id in the same page. This is handled through the Highcharts.idCounter, and definitions will have id's like highcharts-0, highcharts-1 etc.

This system breaks if someone exports a chart from different pages and pastes the SVG into the same page. To prevent this situation we would have to extend the simple counter with a random hash that is (likely) unique to the Highcharts object on the page. Then everywere we run idCounter++ we should instead return a slightly more complicated id, like highcharts-oiwjd-0.

@TorsteinHonsi TorsteinHonsi added a commit that closed this issue Nov 7, 2016
@TorsteinHonsi TorsteinHonsi Fixed #5926, more unique id's for clipping and other internal `defs`.…
… Prevents conflicts when SVGs from different sources are pasted in the same page.

PS: No tests added, the auto-visual tests will reveal regressions.

@jon-a-nygaard jon-a-nygaard added Enhancement and removed Undecided labels Nov 9, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment