Fix clip path issue on Firefox

marmelab · Feb 29, 2016 · c82f025 · c82f025
1 parent 3f7d3f7
commit c82f025
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git a/lib/drawer/index.js b/lib/drawer/index.js
@@ -9,9 +9,9 @@ import lineSeparatorFactory from './lineSeparator';
 
 export default (svg, dimensions, scales, configuration) => {
     const defs = svg.append('defs');
-    defs.append('svg:clipPath')
-        .attr('id', 'drops-container')
-            .append('svg:rect')
+    defs.append('clipPath')
+        .attr('id', 'drops-container-clipper')
+        .append('rect')
             .attr('id', 'drops-container-rect')
             .attr('x', configuration.margin.left + 10)
             .attr('y', 0)
@@ -29,6 +29,7 @@ export default (svg, dimensions, scales, configuration) => {
 
     const dropsContainer = svg.append('g')
         .classed('drops-container', true)
+        .attr('clip-path', 'url(#drops-container-clipper)')
         .style('filter', 'url(#metaballs)');
 
     const extremaContainer = svg.append('g')

diff --git a/style.css b/style.css
@@ -9,8 +9,7 @@
     stroke-width: 1px;
 }
 
-.line-separator, .x-axis
-{
+.line-separator, .x-axis {
     stroke: black;
     fill: none;
     stroke-width: 1px;
@@ -34,7 +33,3 @@ text {
     height: 20px;
     padding: 10px;
 }
-
-.drops-container {
-    clip-path: url(#drops-container);
-}