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

Closed
KacperMadej opened this Issue Nov 3, 2016 · 3 comments

Projects

None yet

3 participants

@KacperMadej
Collaborator

Behaviour

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

https://jsfiddle.net/8rkkqmLf/
The two charts are exported to SVG from a simple demo with just changed height.

Affected browser(s)

IE11, Firefox

@jon-a-nygaard
Collaborator

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

@TorsteinHonsi
Collaborator

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.
80cdf81
@TorsteinHonsi
Collaborator

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