Fixed #6196, dead clip path references.

js/parts/SvgRenderer.js

@@ -1335,13 +1335,25 @@ SVGElement.prototype = {
 			parentToClean = wrapper.renderer.isSVG && element.nodeName === 'SPAN' && wrapper.parentGroup,
 			grandParent,
 			key,
-			i;
+			i,
+			elementsWithClipPaths;
 
 		// remove events
 		element.onclick = element.onmouseout = element.onmouseover = element.onmousemove = element.point = null;
 		stop(wrapper); // stop running animations
 
 		if (wrapper.clipPath) {
+			// Look for existing references to this clipPath and remove them
+			// before destroying the element
+			elementsWithClipPaths = wrapper.element.ownerSVGElement
+										.querySelectorAll('[clip-path]');
+			each(elementsWithClipPaths, function (el) {
+				if (el.getAttribute('clip-path').indexOf(
+						wrapper.clipPath.element.id) > -1) {
+					el.removeAttribute('clip-path');
+				}
+			});
+
 			wrapper.clipPath = wrapper.clipPath.destroy();
 		}
 

samples/unit-tests/svgrenderer/clip-paths/demo.details

@@ -0,0 +1,5 @@
+---
+ resources:
+   - https://code.jquery.com/qunit/qunit-2.0.1.js
+   - https://code.jquery.com/qunit/qunit-2.0.1.css
+...

samples/unit-tests/svgrenderer/clip-paths/demo.html

@@ -0,0 +1,7 @@
+<script src="https://code.highcharts.com/highcharts.js"></script>
+
+<div id="qunit"></div>
+<div id="qunit-fixture"></div>
+
+
+<div id="container" style="width: 600px; margin: 0 auto;"></div>

samples/unit-tests/svgrenderer/clip-paths/demo.js

@@ -0,0 +1,43 @@
+QUnit.test('Verify that references to unused clip paths are removed after animation',
+    function (assert) {
+        var done = assert.async(2),
+            // Get list of unique clip path references
+            getClipPathSet = function (chart) {
+                var clipPathList = [];
+                Highcharts.each(
+                    chart.container.querySelectorAll('[clip-path]'),
+                    function (clipPath) {
+                        var p = clipPath.getAttribute('clip-path');
+                        if (Highcharts.inArray(p, clipPathList) < 0) {
+                            clipPathList.push(p);
+                        }
+                    }
+                );
+                return clipPathList;
+            };
+
+        Highcharts.chart('container', {
+            chart: {
+                events: {
+                    load: function () {
+                        assert.strictEqual(getClipPathSet(this).length, 2,
+                            'There are references to two different clipPaths');
+                        done();
+                    }
+                }
+            },
+            series: [{
+                data: [1, 2, 3, 4],
+                animation: {
+                    duration: 1
+                },
+                events: {
+                    afterAnimate: function () {
+                        assert.strictEqual(getClipPathSet(this.chart).length, 1,
+                    'There are only references to one clipPath after animation');
+                        done();
+                    }
+                }
+            }]
+        });
+    });