diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/clip.js | 5 | ||||
| -rw-r--r-- | src/event.js | 13 | ||||
| -rw-r--r-- | src/gradient.js | 5 | ||||
| -rw-r--r-- | src/mask.js | 42 | ||||
| -rw-r--r-- | src/svg.js | 7 |
5 files changed, 61 insertions, 11 deletions
diff --git a/src/clip.js b/src/clip.js index 6d820df..ab7bebf 100644 --- a/src/clip.js +++ b/src/clip.js @@ -1,12 +1,9 @@ -// initialize id sequence -var clipID = 0; - SVG.Clip = function Clip() { this.constructor.call(this, SVG.create('clipPath')); // set unique id - this.id = 'svgjs_clip_' + (clipID++); + this.id = 'svgjs_' + (SVG.did++); this.attr('id', this.id); }; diff --git a/src/event.js b/src/event.js index 4f587d2..32c2be2 100644 --- a/src/event.js +++ b/src/event.js @@ -1,5 +1,16 @@ -var eventTypes = ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'mousemove'].forEach(function(e) { +[ 'click', + 'dblclick', + 'mousedown', + 'mouseup', + 'mouseover', + 'mouseout', + 'mousemove', + 'touchstart', + 'touchend', + 'touchmove', + 'touchcancel' ].forEach(function(e) { + // add event to SVG.Elment SVG.Element.prototype[e] = function(f) { var s = this; diff --git a/src/gradient.js b/src/gradient.js index b9007ef..b9533cb 100644 --- a/src/gradient.js +++ b/src/gradient.js @@ -1,12 +1,9 @@ -// initialize id sequence -var gradID = 0; - SVG.Gradient = function Gradient(t) { this.constructor.call(this, SVG.create(t + 'Gradient')); // set unique id - this.id = 'svgjs_grad_' + (gradID++); + this.id = 'svgjs_' + (SVG.did++); this.attr('id', this.id); // store type diff --git a/src/mask.js b/src/mask.js new file mode 100644 index 0000000..a9b457e --- /dev/null +++ b/src/mask.js @@ -0,0 +1,42 @@ + +SVG.Mask = function Mask() { + this.constructor.call(this, SVG.create('mask')); + + // set unique id + this.id = 'svgjs_' + (SVG.did++); + this.attr('id', this.id); +}; + +// inherit from SVG.Element +SVG.Mask.prototype = new SVG.Element(); + +// include the container object +SVG.extend(SVG.Mask, SVG.Container); + +// add clipping functionality to element +SVG.extend(SVG.Element, { + + // mask element using another element + mask: function(b) { + var m = this.parent.defs().mask(); + b(m); + + return this.maskTo(m); + }, + + // distribute mask to svg element + maskTo: function(m) { + return this.attr('mask', 'url(#' + m.id + ')'); + } + +}); + +// add def-specific functions +SVG.extend(SVG.Defs, { + + // create clippath + mask: function() { + return this.put(new SVG.Mask()); + } + +});
\ No newline at end of file @@ -1,8 +1,11 @@ this.SVG = { // define default namespaces - ns: 'http://www.w3.org/2000/svg', - xlink: 'http://www.w3.org/1999/xlink', + ns: 'http://www.w3.org/2000/svg', + xlink: 'http://www.w3.org/1999/xlink', + + // initialize defs id sequence + did: 0, // method for element creation create: function(e) { |