diff options
Diffstat (limited to 'src')
| -rwxr-xr-x | src/element.js | 11 | ||||
| -rwxr-xr-x | src/gradient.js | 12 | ||||
| -rwxr-xr-x | src/image.js | 37 | ||||
| -rw-r--r-- | src/pattern.js | 52 | ||||
| -rwxr-xr-x | src/regex.js | 3 |
5 files changed, 104 insertions, 11 deletions
diff --git a/src/element.js b/src/element.js index 01146ab..9ae2cd3 100755 --- a/src/element.js +++ b/src/element.js @@ -179,6 +179,17 @@ SVG.Element = SVG.invent({ this.attr('stroke', parseFloat(v) > 0 ? this._stroke : null) else if (a == 'stroke') this._stroke = v + + /* convert image fill and stroke to patterns */ + if (a == 'fill' || a == 'stroke') { + if (SVG.regex.isImage.test(v)) + v = this.doc().defs().image(v, 0, 0) + + if (v instanceof SVG.Image) + v = this.doc().defs().pattern(0, 0, function() { + this.add(v) + }) + } /* ensure full hex color */ if (SVG.Color.test(v) || SVG.Color.isRgb(v)) diff --git a/src/gradient.js b/src/gradient.js index e95e18b..504ec49 100755 --- a/src/gradient.js +++ b/src/gradient.js @@ -32,7 +32,7 @@ SVG.Gradient = SVG.invent({ } // Add a color stop , at: function(stop) { - return this.put(new SVG.Stop().update(stop)) + return this.put(new SVG.Stop).update(stop) } // Update gradient , update: function(block) { @@ -40,7 +40,8 @@ SVG.Gradient = SVG.invent({ this.clear() /* invoke passed block */ - block(this) + if (typeof block == 'function') + block.call(this, this) return this } @@ -66,12 +67,7 @@ SVG.Gradient = SVG.invent({ SVG.extend(SVG.Defs, { // define gradient gradient: function(type, block) { - var element = this.put(new SVG.Gradient(type)) - - /* invoke passed block */ - block(element) - - return element + return this.put(new SVG.Gradient(type)).update(block) } }) diff --git a/src/image.js b/src/image.js index 24333c7..60d57b1 100755 --- a/src/image.js +++ b/src/image.js @@ -9,7 +9,39 @@ SVG.Image = SVG.invent({ , extend: { // (re)load image load: function(url) { - return (url ? this.attr('href', (this.src = url), SVG.xlink) : this) + if (!url) return this + + var self = this + , img = document.createElement('img') + + /* preload image */ + img.onload = function() { + var p = self.doc(SVG.Pattern) + + /* ensure image size */ + if (self.width() == 0 && self.height() == 0) + self.size(img.width, img.height) + + /* ensure pattern size if not set */ + if (p && p.width() == 0 && p.height() == 0) + p.size(self.width(), self.height()) + + /* callback */ + if (typeof self._loaded == 'function') + self._loaded.call(self, { + width: img.width + , height: img.height + , ratio: img.width / img.height + , url: url + }) + } + + return this.attr('href', (img.src = this.src = url), SVG.xlink) + } + // Add loade callback + , loaded: function(loaded) { + this._loaded = loaded + return this } } @@ -17,8 +49,7 @@ SVG.Image = SVG.invent({ , construct: { // Create image element, load image and set its size image: function(source, width, height) { - width = width != null ? width : 100 - return this.put(new SVG.Image().load(source).size(width, height != null ? height : width)) + return this.put(new SVG.Image).load(source).size(width || 0, height || width || 0) } } })
\ No newline at end of file diff --git a/src/pattern.js b/src/pattern.js new file mode 100644 index 0000000..e5398d2 --- /dev/null +++ b/src/pattern.js @@ -0,0 +1,52 @@ +SVG.Pattern = SVG.invent({ + // Initialize node + create: 'pattern' + + // Inherit from +, inherit: SVG.Container + + // Add class methods +, extend: { + // Return the fill id + fill: function() { + return 'url(#' + this.attr('id') + ')' + } + // Update pattern by rebuilding + , update: function(block) { + /* remove content */ + this.clear() + + /* invoke passed block */ + if (typeof block == 'function') + block.call(this, this) + + return this + } + // Alias string convertion to fill + , toString: function() { + return this.fill() + } + } + + // Add parent method +, construct: { + // Create pattern element in defs + pattern: function(width, height, block) { + return this.defs().pattern(width, height, block) + } + } +}) + +SVG.extend(SVG.Defs, { + // Define gradient + pattern: function(width, height, block) { + return this.put(new SVG.Pattern).update(block).attr({ + x: 0 + , y: 0 + , width: width + , height: height + , patternUnits: 'userSpaceOnUse' + }) + } + +})
\ No newline at end of file diff --git a/src/regex.js b/src/regex.js index 602d2c7..3a28e64 100755 --- a/src/regex.js +++ b/src/regex.js @@ -34,5 +34,8 @@ SVG.regex = { /* test for percent value */ , isPercent: /^-?[\d\.]+%$/ + + /* test for image url */ +, isImage: /\.(jpg|jpeg|png|gif)(\?[^=]+.*)?/i }
\ No newline at end of file |