1 files changed, 53 insertions, 0 deletions
diff --git a/src/ClipPath.js b/src/ClipPath.js
new file mode 100644
index 0000000..63fff74
--- /dev/null
+++ b/src/ClipPath.js
@@ -0,0 +1,53 @@
+SVG.ClipPath = SVG.invent({
+  // Initialize node
+  create: 'clipPath',
+
+  // Inherit from
+  inherit: SVG.Container,
+
+  // Add class methods
+  extend: {
+    // Unclip all clipped elements and remove itself
+    remove: function () {
+      // unclip all targets
+      this.targets().forEach(function (el) {
+        el.unclip()
+      })
+
+      // remove clipPath from parent
+      return SVG.Element.prototype.remove.call(this)
+    },
+
+    targets: function () {
+      return SVG.select('svg [clip-path*="' + this.id() + '"]')
+    }
+  },
+
+  // Add parent method
+  construct: {
+    // Create clipping element
+    clip: function () {
+      return this.defs().put(new SVG.ClipPath())
+    }
+  }
+})
+
+//
+SVG.extend(SVG.Element, {
+  // Distribute clipPath to svg element
+  clipWith: function (element) {
+    // use given clip or create a new one
+    var clipper = element instanceof SVG.ClipPath ? element : this.parent().clip().add(element)
+
+    // apply mask
+    return this.attr('clip-path', 'url("#' + clipper.id() + '")')
+  },
+  // Unclip element
+  unclip: function () {
+    return this.attr('clip-path', null)
+  },
+  clipper: function () {
+    return this.reference('clip-path')
+  }
+
+})