--- /dev/null
+\feff/* http://keith-wood.name/svg.html\r
+ SVG for jQuery v1.4.3.\r
+ Written by Keith Wood (kbwood{at}iinet.com.au) August 2007.\r
+ Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and \r
+ MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses. \r
+ Please attribute the author if you use it. */\r
+\r
+(function($) { // Hide scope, no $ conflict\r
+\r
+/* SVG manager.\r
+ Use the singleton instance of this class, $.svg, \r
+ to interact with the SVG functionality. */\r
+function SVGManager() {\r
+ this._settings = []; // Settings to be remembered per SVG object\r
+ this._extensions = []; // List of SVG extensions added to SVGWrapper\r
+ // for each entry [0] is extension name, [1] is extension class (function)\r
+ // the function takes one parameter - the SVGWrapper instance\r
+ this.regional = []; // Localisations, indexed by language, '' for default (English)\r
+ this.regional[''] = {errorLoadingText: 'Error loading',\r
+ notSupportedText: 'This browser does not support SVG'};\r
+ this.local = this.regional['']; // Current localisation\r
+ this._uuid = new Date().getTime();\r
+ this._renesis = detectActiveX('RenesisX.RenesisCtrl');\r
+}\r
+\r
+/* Determine whether a given ActiveX control is available.\r
+ @param classId (string) the ID for the ActiveX control\r
+ @return (boolean) true if found, false if not */\r
+function detectActiveX(classId) {\r
+ try {\r
+ return !!(window.ActiveXObject && new ActiveXObject(classId));\r
+ }\r
+ catch (e) {\r
+ return false;\r
+ }\r
+}\r
+\r
+var PROP_NAME = 'svgwrapper';\r
+\r
+$.extend(SVGManager.prototype, {\r
+ /* Class name added to elements to indicate already configured with SVG. */\r
+ markerClassName: 'hasSVG',\r
+\r
+ /* SVG namespace. */\r
+ svgNS: 'http://www.w3.org/2000/svg',\r
+ /* XLink namespace. */\r
+ xlinkNS: 'http://www.w3.org/1999/xlink',\r
+\r
+ /* SVG wrapper class. */\r
+ _wrapperClass: SVGWrapper,\r
+\r
+ /* Camel-case versions of attribute names containing dashes or are reserved words. */\r
+ _attrNames: {class_: 'class', in_: 'in',\r
+ alignmentBaseline: 'alignment-baseline', baselineShift: 'baseline-shift',\r
+ clipPath: 'clip-path', clipRule: 'clip-rule',\r
+ colorInterpolation: 'color-interpolation',\r
+ colorInterpolationFilters: 'color-interpolation-filters',\r
+ colorRendering: 'color-rendering', dominantBaseline: 'dominant-baseline',\r
+ enableBackground: 'enable-background', fillOpacity: 'fill-opacity',\r
+ fillRule: 'fill-rule', floodColor: 'flood-color',\r
+ floodOpacity: 'flood-opacity', fontFamily: 'font-family',\r
+ fontSize: 'font-size', fontSizeAdjust: 'font-size-adjust',\r
+ fontStretch: 'font-stretch', fontStyle: 'font-style',\r
+ fontVariant: 'font-variant', fontWeight: 'font-weight',\r
+ glyphOrientationHorizontal: 'glyph-orientation-horizontal',\r
+ glyphOrientationVertical: 'glyph-orientation-vertical',\r
+ horizAdvX: 'horiz-adv-x', horizOriginX: 'horiz-origin-x',\r
+ imageRendering: 'image-rendering', letterSpacing: 'letter-spacing',\r
+ lightingColor: 'lighting-color', markerEnd: 'marker-end',\r
+ markerMid: 'marker-mid', markerStart: 'marker-start',\r
+ stopColor: 'stop-color', stopOpacity: 'stop-opacity',\r
+ strikethroughPosition: 'strikethrough-position',\r
+ strikethroughThickness: 'strikethrough-thickness',\r
+ strokeDashArray: 'stroke-dasharray', strokeDashOffset: 'stroke-dashoffset',\r
+ strokeLineCap: 'stroke-linecap', strokeLineJoin: 'stroke-linejoin',\r
+ strokeMiterLimit: 'stroke-miterlimit', strokeOpacity: 'stroke-opacity',\r
+ strokeWidth: 'stroke-width', textAnchor: 'text-anchor',\r
+ textDecoration: 'text-decoration', textRendering: 'text-rendering',\r
+ underlinePosition: 'underline-position', underlineThickness: 'underline-thickness',\r
+ vertAdvY: 'vert-adv-y', vertOriginY: 'vert-origin-y',\r
+ wordSpacing: 'word-spacing', writingMode: 'writing-mode'},\r
+\r
+ /* Add the SVG object to its container. */\r
+ _attachSVG: function(container, settings) {\r
+ var svg = (container.namespaceURI == this.svgNS ? container : null);\r
+ var container = (svg ? null : container);\r
+ if ($(container || svg).hasClass(this.markerClassName)) {\r
+ return;\r
+ }\r
+ if (typeof settings == 'string') {\r
+ settings = {loadURL: settings};\r
+ }\r
+ else if (typeof settings == 'function') {\r
+ settings = {onLoad: settings};\r
+ }\r
+ $(container || svg).addClass(this.markerClassName);\r
+ try {\r
+ if (!svg) {\r
+ svg = document.createElementNS(this.svgNS, 'svg');\r
+ svg.setAttribute('version', '1.1');\r
+ svg.setAttribute('width', container.clientWidth);\r
+ svg.setAttribute('height', container.clientHeight);\r
+ container.appendChild(svg);\r
+ }\r
+ this._afterLoad(container, svg, settings || {});\r
+ }\r
+ catch (e) {\r
+ if ($.browser.msie) {\r
+ if (!container.id) {\r
+ container.id = 'svg' + (this._uuid++);\r
+ }\r
+ this._settings[container.id] = settings;\r
+ container.innerHTML = '<embed type="image/svg+xml" width="100%" ' +\r
+ 'height="100%" src="' + (settings.initPath || '') + 'blank.svg"/>';\r
+ }\r
+ else {\r
+ container.innerHTML = '<p class="svg_error">' +\r
+ this.local.notSupportedText + '</p>';\r
+ }\r
+ }\r
+ },\r
+\r
+ /* SVG callback after loading - register SVG root. */\r
+ _registerSVG: function() {\r
+ for (var i = 0; i < document.embeds.length; i++) { // Check all\r
+ var container = document.embeds[i].parentNode;\r
+ if (!$(container).hasClass($.svg.markerClassName) || // Not SVG\r
+ $.data(container, PROP_NAME)) { // Already done\r
+ continue;\r
+ }\r
+ var svg = null;\r
+ try {\r
+ svg = document.embeds[i].getSVGDocument();\r
+ }\r
+ catch(e) {\r
+ setTimeout($.svg._registerSVG, 250); // Renesis takes longer to load\r
+ return;\r
+ }\r
+ svg = (svg ? svg.documentElement : null);\r
+ if (svg) {\r
+ $.svg._afterLoad(container, svg);\r
+ }\r
+ }\r
+ },\r
+\r
+ /* Post-processing once loaded. */\r
+ _afterLoad: function(container, svg, settings) {\r
+ var settings = settings || this._settings[container.id];\r
+ this._settings[container ? container.id : ''] = null;\r
+ var wrapper = new this._wrapperClass(svg, container);\r
+ $.data(container || svg, PROP_NAME, wrapper);\r
+ try {\r
+ if (settings.loadURL) { // Load URL\r
+ wrapper.load(settings.loadURL, settings);\r
+ }\r
+ if (settings.settings) { // Additional settings\r
+ wrapper.configure(settings.settings);\r
+ }\r
+ if (settings.onLoad && !settings.loadURL) { // Onload callback\r
+ settings.onLoad.apply(container || svg, [wrapper]);\r
+ }\r
+ }\r
+ catch (e) {\r
+ alert(e);\r
+ }\r
+ },\r
+\r
+ /* Return the SVG wrapper created for a given container.\r
+ @param container (string) selector for the container or\r
+ (element) the container for the SVG object or\r
+ jQuery collection - first entry is the container\r
+ @return (SVGWrapper) the corresponding SVG wrapper element, or null if not attached */\r
+ _getSVG: function(container) {\r
+ container = (typeof container == 'string' ? $(container)[0] :\r
+ (container.jquery ? container[0] : container));\r
+ return $.data(container, PROP_NAME);\r
+ },\r
+\r
+ /* Remove the SVG functionality from a div.\r
+ @param container (element) the container for the SVG object */\r
+ _destroySVG: function(container) {\r
+ var $container = $(container);\r
+ if (!$container.hasClass(this.markerClassName)) {\r
+ return;\r
+ }\r
+ $container.removeClass(this.markerClassName);\r
+ if (container.namespaceURI != this.svgNS) {\r
+ $container.empty();\r
+ }\r
+ $.removeData(container, PROP_NAME);\r
+ },\r
+\r
+ /* Extend the SVGWrapper object with an embedded class.\r
+ The constructor function must take a single parameter that is\r
+ a reference to the owning SVG root object. This allows the \r
+ extension to access the basic SVG functionality.\r
+ @param name (string) the name of the SVGWrapper attribute to access the new class\r
+ @param extClass (function) the extension class constructor */\r
+ addExtension: function(name, extClass) {\r
+ this._extensions.push([name, extClass]);\r
+ }\r
+});\r
+\r
+/* The main SVG interface, which encapsulates the SVG element.\r
+ Obtain a reference from $().svg('get') */\r
+function SVGWrapper(svg, container) {\r
+ this._svg = svg; // The SVG root node\r
+ this._container = container; // The containing div\r
+ for (var i = 0; i < $.svg._extensions.length; i++) {\r
+ var extension = $.svg._extensions[i];\r
+ this[extension[0]] = new extension[1](this);\r
+ }\r
+}\r
+\r
+$.extend(SVGWrapper.prototype, {\r
+\r
+ /* Retrieve the width of the SVG object. */\r
+ _width: function() {\r
+ return (this._container ? this._container.clientWidth : this._svg.width);\r
+ },\r
+\r
+ /* Retrieve the height of the SVG object. */\r
+ _height: function() {\r
+ return (this._container ? this._container.clientHeight : this._svg.height);\r
+ },\r
+\r
+ /* Retrieve the root SVG element.\r
+ @return the top-level SVG element */\r
+ root: function() {\r
+ return this._svg;\r
+ },\r
+\r
+ /* Configure the SVG root.\r
+ @param settings (object) additional settings for the root\r
+ @param clear (boolean) true to remove existing attributes first,\r
+ false to add to what is already there (optional)\r
+ @return (SVGWrapper) this root */\r
+ configure: function(settings, clear) {\r
+ if (clear) {\r
+ for (var i = this._svg.attributes.length - 1; i >= 0; i--) {\r
+ var attr = this._svg.attributes.item(i);\r
+ if (!(attr.nodeName == 'onload' || attr.nodeName == 'version' || \r
+ attr.nodeName.substring(0, 5) == 'xmlns')) {\r
+ this._svg.attributes.removeNamedItem(attr.nodeName);\r
+ }\r
+ }\r
+ }\r
+ for (var attrName in settings) {\r
+ this._svg.setAttribute(attrName, settings[attrName]);\r
+ }\r
+ return this;\r
+ },\r
+\r
+ /* Locate a specific element in the SVG document.\r
+ @param id (string) the element's identifier\r
+ @return (element) the element reference, or null if not found */\r
+ getElementById: function(id) {\r
+ return this._svg.ownerDocument.getElementById(id);\r
+ },\r
+\r
+ /* Change the attributes for a SVG node.\r
+ @param element (SVG element) the node to change\r
+ @param settings (object) the new settings\r
+ @return (SVGWrapper) this root */\r
+ change: function(element, settings) {\r
+ if (element) {\r
+ for (var name in settings) {\r
+ if (settings[name] == null) {\r
+ element.removeAttribute(name);\r
+ }\r
+ else {\r
+ element.setAttribute(name, settings[name]);\r
+ }\r
+ }\r
+ }\r
+ return this;\r
+ },\r
+\r
+ /* Check for parent being absent and adjust arguments accordingly. */\r
+ _args: function(values, names, optSettings) {\r
+ names.splice(0, 0, 'parent');\r
+ names.splice(names.length, 0, 'settings');\r
+ var args = {};\r
+ var offset = 0;\r
+ if (values[0] != null && values[0].jquery) {\r
+ values[0] = values[0][0];\r
+ }\r
+ if (values[0] != null && !(typeof values[0] == 'object' && values[0].nodeName)) {\r
+ args['parent'] = null;\r
+ offset = 1;\r
+ }\r
+ for (var i = 0; i < values.length; i++) {\r
+ args[names[i + offset]] = values[i];\r
+ }\r
+ if (optSettings) {\r
+ $.each(optSettings, function(i, value) {\r
+ if (typeof args[value] == 'object') {\r
+ args.settings = args[value];\r
+ args[value] = null;\r
+ }\r
+ });\r
+ }\r
+ return args;\r
+ },\r
+\r
+ /* Add a title.\r
+ @param parent (element or jQuery) the parent node for the new title (optional)\r
+ @param text (string) the text of the title\r
+ @param settings (object) additional settings for the title (optional)\r
+ @return (element) the new title node */\r
+ title: function(parent, text, settings) {\r
+ var args = this._args(arguments, ['text']);\r
+ var node = this._makeNode(args.parent, 'title', args.settings || {});\r
+ node.appendChild(this._svg.ownerDocument.createTextNode(args.text));\r
+ return node;\r
+ },\r
+\r
+ /* Add a description.\r
+ @param parent (element or jQuery) the parent node for the new description (optional)\r
+ @param text (string) the text of the description\r
+ @param settings (object) additional settings for the description (optional)\r
+ @return (element) the new description node */\r
+ describe: function(parent, text, settings) {\r
+ var args = this._args(arguments, ['text']);\r
+ var node = this._makeNode(args.parent, 'desc', args.settings || {});\r
+ node.appendChild(this._svg.ownerDocument.createTextNode(args.text));\r
+ return node;\r
+ },\r
+\r
+ /* Add a definitions node.\r
+ @param parent (element or jQuery) the parent node for the new definitions (optional)\r
+ @param id (string) the ID of this definitions (optional)\r
+ @param settings (object) additional settings for the definitions (optional)\r
+ @return (element) the new definitions node */\r
+ defs: function(parent, id, settings) {\r
+ var args = this._args(arguments, ['id'], ['id']);\r
+ return this._makeNode(args.parent, 'defs', $.extend(\r
+ (args.id ? {id: args.id} : {}), args.settings || {}));\r
+ },\r
+\r
+ /* Add a symbol definition.\r
+ @param parent (element or jQuery) the parent node for the new symbol (optional)\r
+ @param id (string) the ID of this symbol\r
+ @param x1 (number) the left coordinate for this symbol\r
+ @param y1 (number) the top coordinate for this symbol\r
+ @param width (number) the width of this symbol\r
+ @param height (number) the height of this symbol\r
+ @param settings (object) additional settings for the symbol (optional)\r
+ @return (element) the new symbol node */\r
+ symbol: function(parent, id, x1, y1, width, height, settings) {\r
+ var args = this._args(arguments, ['id', 'x1', 'y1', 'width', 'height']);\r
+ return this._makeNode(args.parent, 'symbol', $.extend({id: args.id,\r
+ viewBox: args.x1 + ' ' + args.y1 + ' ' + args.width + ' ' + args.height},\r
+ args.settings || {}));\r
+ },\r
+\r
+ /* Add a marker definition.\r
+ @param parent (element or jQuery) the parent node for the new marker (optional)\r
+ @param id (string) the ID of this marker\r
+ @param refX (number) the x-coordinate for the reference point\r
+ @param refY (number) the y-coordinate for the reference point\r
+ @param mWidth (number) the marker viewport width\r
+ @param mHeight (number) the marker viewport height\r
+ @param orient (string or int) 'auto' or angle (degrees) (optional)\r
+ @param settings (object) additional settings for the marker (optional)\r
+ @return (element) the new marker node */\r
+ marker: function(parent, id, refX, refY, mWidth, mHeight, orient, settings) {\r
+ var args = this._args(arguments, ['id', 'refX', 'refY',\r
+ 'mWidth', 'mHeight', 'orient'], ['orient']);\r
+ return this._makeNode(args.parent, 'marker', $.extend(\r
+ {id: args.id, refX: args.refX, refY: args.refY, markerWidth: args.mWidth, \r
+ markerHeight: args.mHeight, orient: args.orient || 'auto'}, args.settings || {}));\r
+ },\r
+\r
+ /* Add a style node.\r
+ @param parent (element or jQuery) the parent node for the new node (optional)\r
+ @param styles (string) the CSS styles\r
+ @param settings (object) additional settings for the node (optional)\r
+ @return (element) the new style node */\r
+ style: function(parent, styles, settings) {\r
+ var args = this._args(arguments, ['styles']);\r
+ var node = this._makeNode(args.parent, 'style', $.extend(\r
+ {type: 'text/css'}, args.settings || {}));\r
+ node.appendChild(this._svg.ownerDocument.createTextNode(args.styles));\r
+ if ($.browser.opera) {\r
+ $('head').append('<style type="text/css">' + args.styles + '</style>');\r
+ }\r
+ return node;\r
+ },\r
+\r
+ /* Add a script node.\r
+ @param parent (element or jQuery) the parent node for the new node (optional)\r
+ @param script (string) the JavaScript code\r
+ @param type (string) the MIME type for the code (optional, default 'text/javascript')\r
+ @param settings (object) additional settings for the node (optional)\r
+ @return (element) the new script node */\r
+ script: function(parent, script, type, settings) {\r
+ var args = this._args(arguments, ['script', 'type'], ['type']);\r
+ var node = this._makeNode(args.parent, 'script', $.extend(\r
+ {type: args.type || 'text/javascript'}, args.settings || {}));\r
+ node.appendChild(this._svg.ownerDocument.createTextNode(this._escapeXML(args.script)));\r
+ if (!$.browser.mozilla) {\r
+ $.globalEval(args.script);\r
+ }\r
+ return node;\r
+ },\r
+\r
+ /* Add a linear gradient definition.\r
+ Specify all of x1, y1, x2, y2 or none of them.\r
+ @param parent (element or jQuery) the parent node for the new gradient (optional)\r
+ @param id (string) the ID for this gradient\r
+ @param stops (string[][]) the gradient stops, each entry is\r
+ [0] is offset (0.0-1.0 or 0%-100%), [1] is colour, \r
+ [2] is opacity (optional)\r
+ @param x1 (number) the x-coordinate of the gradient start (optional)\r
+ @param y1 (number) the y-coordinate of the gradient start (optional)\r
+ @param x2 (number) the x-coordinate of the gradient end (optional)\r
+ @param y2 (number) the y-coordinate of the gradient end (optional)\r
+ @param settings (object) additional settings for the gradient (optional)\r
+ @return (element) the new gradient node */\r
+ linearGradient: function(parent, id, stops, x1, y1, x2, y2, settings) {\r
+ var args = this._args(arguments,\r
+ ['id', 'stops', 'x1', 'y1', 'x2', 'y2'], ['x1']);\r
+ var sets = $.extend({id: args.id}, \r
+ (args.x1 != null ? {x1: args.x1, y1: args.y1, x2: args.x2, y2: args.y2} : {}));\r
+ return this._gradient(args.parent, 'linearGradient', \r
+ $.extend(sets, args.settings || {}), args.stops);\r
+ },\r
+\r
+ /* Add a radial gradient definition.\r
+ Specify all of cx, cy, r, fx, fy or none of them.\r
+ @param parent (element or jQuery) the parent node for the new gradient (optional)\r
+ @param id (string) the ID for this gradient\r
+ @param stops (string[][]) the gradient stops, each entry\r
+ [0] is offset, [1] is colour, [2] is opacity (optional)\r
+ @param cx (number) the x-coordinate of the largest circle centre (optional)\r
+ @param cy (number) the y-coordinate of the largest circle centre (optional)\r
+ @param r (number) the radius of the largest circle (optional)\r
+ @param fx (number) the x-coordinate of the gradient focus (optional)\r
+ @param fy (number) the y-coordinate of the gradient focus (optional)\r
+ @param settings (object) additional settings for the gradient (optional)\r
+ @return (element) the new gradient node */\r
+ radialGradient: function(parent, id, stops, cx, cy, r, fx, fy, settings) {\r
+ var args = this._args(arguments,\r
+ ['id', 'stops', 'cx', 'cy', 'r', 'fx', 'fy'], ['cx']);\r
+ var sets = $.extend({id: args.id}, (args.cx != null ?\r
+ {cx: args.cx, cy: args.cy, r: args.r, fx: args.fx, fy: args.fy} : {}));\r
+ return this._gradient(args.parent, 'radialGradient', \r
+ $.extend(sets, args.settings || {}), args.stops);\r
+ },\r
+\r
+ /* Add a gradient node. */\r
+ _gradient: function(parent, name, settings, stops) {\r
+ var node = this._makeNode(parent, name, settings);\r
+ for (var i = 0; i < stops.length; i++) {\r
+ var stop = stops[i];\r
+ this._makeNode(node, 'stop', $.extend(\r
+ {offset: stop[0], stopColor: stop[1]}, \r
+ (stop[2] != null ? {stopOpacity: stop[2]} : {})));\r
+ }\r
+ return node;\r
+ },\r
+\r
+ /* Add a pattern definition.\r
+ Specify all of vx, vy, xwidth, vheight or none of them.\r
+ @param parent (element or jQuery) the parent node for the new pattern (optional)\r
+ @param id (string) the ID for this pattern\r
+ @param x (number) the x-coordinate for the left edge of the pattern\r
+ @param y (number) the y-coordinate for the top edge of the pattern\r
+ @param width (number) the width of the pattern\r
+ @param height (number) the height of the pattern\r
+ @param vx (number) the minimum x-coordinate for view box (optional)\r
+ @param vy (number) the minimum y-coordinate for the view box (optional)\r
+ @param vwidth (number) the width of the view box (optional)\r
+ @param vheight (number) the height of the view box (optional)\r
+ @param settings (object) additional settings for the pattern (optional)\r
+ @return (element) the new pattern node */\r
+ pattern: function(parent, id, x, y, width, height, vx, vy, vwidth, vheight, settings) {\r
+ var args = this._args(arguments, ['id', 'x', 'y', 'width', 'height',\r
+ 'vx', 'vy', 'vwidth', 'vheight'], ['vx']);\r
+ var sets = $.extend({id: args.id, x: args.x, y: args.y,\r
+ width: args.width, height: args.height}, (args.vx != null ?\r
+ {viewBox: args.vx + ' ' + args.vy + ' ' + args.vwidth + ' ' + args.vheight} : {}));\r
+ return this._makeNode(args.parent, 'pattern', $.extend(sets, args.settings || {}));\r
+ },\r
+\r
+ /* Add a mask definition.\r
+ @param parent (element or jQuery) the parent node for the new mask (optional)\r
+ @param id (string) the ID for this mask\r
+ @param x (number) the x-coordinate for the left edge of the mask\r
+ @param y (number) the y-coordinate for the top edge of the mask\r
+ @param width (number) the width of the mask\r
+ @param height (number) the height of the mask\r
+ @param settings (object) additional settings for the mask (optional)\r
+ @return (element) the new mask node */\r
+ mask: function(parent, id, x, y, width, height, settings) {\r
+ var args = this._args(arguments, ['id', 'x', 'y', 'width', 'height']);\r
+ return this._makeNode(args.parent, 'mask', $.extend(\r
+ {id: args.id, x: args.x, y: args.y, width: args.width, height: args.height},\r
+ args.settings || {}));\r
+ },\r
+\r
+ /* Create a new path object.\r
+ @return (SVGPath) a new path object */\r
+ createPath: function() {\r
+ return new SVGPath();\r
+ },\r
+\r
+ /* Create a new text object.\r
+ @return (SVGText) a new text object */\r
+ createText: function() {\r
+ return new SVGText();\r
+ },\r
+\r
+ /* Add an embedded SVG element.\r
+ Specify all of vx, vy, vwidth, vheight or none of them.\r
+ @param parent (element or jQuery) the parent node for the new node (optional)\r
+ @param x (number) the x-coordinate for the left edge of the node\r
+ @param y (number) the y-coordinate for the top edge of the node\r
+ @param width (number) the width of the node\r
+ @param height (number) the height of the node\r
+ @param vx (number) the minimum x-coordinate for view box (optional)\r
+ @param vy (number) the minimum y-coordinate for the view box (optional)\r
+ @param vwidth (number) the width of the view box (optional)\r
+ @param vheight (number) the height of the view box (optional)\r
+ @param settings (object) additional settings for the node (optional)\r
+ @return (element) the new node */\r
+ svg: function(parent, x, y, width, height, vx, vy, vwidth, vheight, settings) {\r
+ var args = this._args(arguments, ['x', 'y', 'width', 'height',\r
+ 'vx', 'vy', 'vwidth', 'vheight'], ['vx']);\r
+ var sets = $.extend({x: args.x, y: args.y, width: args.width, height: args.height}, \r
+ (args.vx != null ? {viewBox: args.vx + ' ' + args.vy + ' ' +\r
+ args.vwidth + ' ' + args.vheight} : {}));\r
+ return this._makeNode(args.parent, 'svg', $.extend(sets, args.settings || {}));\r
+ },\r
+\r
+ /* Create a group.\r
+ @param parent (element or jQuery) the parent node for the new group (optional)\r
+ @param id (string) the ID of this group (optional)\r
+ @param settings (object) additional settings for the group (optional)\r
+ @return (element) the new group node */\r
+ group: function(parent, id, settings) {\r
+ var args = this._args(arguments, ['id'], ['id']);\r
+ return this._makeNode(args.parent, 'g', $.extend({id: args.id}, args.settings || {}));\r
+ },\r
+\r
+ /* Add a usage reference.\r
+ Specify all of x, y, width, height or none of them.\r
+ @param parent (element or jQuery) the parent node for the new node (optional)\r
+ @param x (number) the x-coordinate for the left edge of the node (optional)\r
+ @param y (number) the y-coordinate for the top edge of the node (optional)\r
+ @param width (number) the width of the node (optional)\r
+ @param height (number) the height of the node (optional)\r
+ @param ref (string) the ID of the definition node\r
+ @param settings (object) additional settings for the node (optional)\r
+ @return (element) the new node */\r
+ use: function(parent, x, y, width, height, ref, settings) {\r
+ var args = this._args(arguments, ['x', 'y', 'width', 'height', 'ref']);\r
+ if (typeof args.x == 'string') {\r
+ args.ref = args.x;\r
+ args.settings = args.y;\r
+ args.x = args.y = args.width = args.height = null;\r
+ }\r
+ var node = this._makeNode(args.parent, 'use', $.extend(\r
+ {x: args.x, y: args.y, width: args.width, height: args.height},\r
+ args.settings || {}));\r
+ node.setAttributeNS($.svg.xlinkNS, 'href', args.ref);\r
+ return node;\r
+ },\r
+\r
+ /* Add a link, which applies to all child elements.\r
+ @param parent (element or jQuery) the parent node for the new link (optional)\r
+ @param ref (string) the target URL\r
+ @param settings (object) additional settings for the link (optional)\r
+ @return (element) the new link node */\r
+ link: function(parent, ref, settings) {\r
+ var args = this._args(arguments, ['ref']);\r
+ var node = this._makeNode(args.parent, 'a', args.settings);\r
+ node.setAttributeNS($.svg.xlinkNS, 'href', args.ref);\r
+ return node;\r
+ },\r
+\r
+ /* Add an image.\r
+ @param parent (element or jQuery) the parent node for the new image (optional)\r
+ @param x (number) the x-coordinate for the left edge of the image\r
+ @param y (number) the y-coordinate for the top edge of the image\r
+ @param width (number) the width of the image\r
+ @param height (number) the height of the image\r
+ @param ref (string) the path to the image\r
+ @param settings (object) additional settings for the image (optional)\r
+ @return (element) the new image node */\r
+ image: function(parent, x, y, width, height, ref, settings) {\r
+ var args = this._args(arguments, ['x', 'y', 'width', 'height', 'ref']);\r
+ var node = this._makeNode(args.parent, 'image', $.extend(\r
+ {x: args.x, y: args.y, width: args.width, height: args.height},\r
+ args.settings || {}));\r
+ node.setAttributeNS($.svg.xlinkNS, 'href', args.ref);\r
+ return node;\r
+ },\r
+\r
+ /* Draw a path.\r
+ @param parent (element or jQuery) the parent node for the new shape (optional)\r
+ @param path (string or SVGPath) the path to draw\r
+ @param settings (object) additional settings for the shape (optional)\r
+ @return (element) the new shape node */\r
+ path: function(parent, path, settings) {\r
+ var args = this._args(arguments, ['path']);\r
+ return this._makeNode(args.parent, 'path', $.extend(\r
+ {d: (args.path.path ? args.path.path() : args.path)}, args.settings || {}));\r
+ },\r
+\r
+ /* Draw a rectangle.\r
+ Specify both of rx and ry or neither.\r
+ @param parent (element or jQuery) the parent node for the new shape (optional)\r
+ @param x (number) the x-coordinate for the left edge of the rectangle\r
+ @param y (number) the y-coordinate for the top edge of the rectangle\r
+ @param width (number) the width of the rectangle\r
+ @param height (number) the height of the rectangle\r
+ @param rx (number) the x-radius of the ellipse for the rounded corners (optional)\r
+ @param ry (number) the y-radius of the ellipse for the rounded corners (optional)\r
+ @param settings (object) additional settings for the shape (optional)\r
+ @return (element) the new shape node */\r
+ rect: function(parent, x, y, width, height, rx, ry, settings) {\r
+ var args = this._args(arguments, ['x', 'y', 'width', 'height', 'rx', 'ry'], ['rx']);\r
+ return this._makeNode(args.parent, 'rect', $.extend(\r
+ {x: args.x, y: args.y, width: args.width, height: args.height},\r
+ (args.rx ? {rx: args.rx, ry: args.ry} : {}), args.settings || {}));\r
+ },\r
+\r
+ /* Draw a circle.\r
+ @param parent (element or jQuery) the parent node for the new shape (optional)\r
+ @param cx (number) the x-coordinate for the centre of the circle\r
+ @param cy (number) the y-coordinate for the centre of the circle\r
+ @param r (number) the radius of the circle\r
+ @param settings (object) additional settings for the shape (optional)\r
+ @return (element) the new shape node */\r
+ circle: function(parent, cx, cy, r, settings) {\r
+ var args = this._args(arguments, ['cx', 'cy', 'r']);\r
+ return this._makeNode(args.parent, 'circle', $.extend(\r
+ {cx: args.cx, cy: args.cy, r: args.r}, args.settings || {}));\r
+ },\r
+\r
+ /* Draw an ellipse.\r
+ @param parent (element or jQuery) the parent node for the new shape (optional)\r
+ @param cx (number) the x-coordinate for the centre of the ellipse\r
+ @param cy (number) the y-coordinate for the centre of the ellipse\r
+ @param rx (number) the x-radius of the ellipse\r
+ @param ry (number) the y-radius of the ellipse\r
+ @param settings (object) additional settings for the shape (optional)\r
+ @return (element) the new shape node */\r
+ ellipse: function(parent, cx, cy, rx, ry, settings) {\r
+ var args = this._args(arguments, ['cx', 'cy', 'rx', 'ry']);\r
+ return this._makeNode(args.parent, 'ellipse', $.extend(\r
+ {cx: args.cx, cy: args.cy, rx: args.rx, ry: args.ry}, args.settings || {}));\r
+ },\r
+\r
+ /* Draw a line.\r
+ @param parent (element or jQuery) the parent node for the new shape (optional)\r
+ @param x1 (number) the x-coordinate for the start of the line\r
+ @param y1 (number) the y-coordinate for the start of the line\r
+ @param x2 (number) the x-coordinate for the end of the line\r
+ @param y2 (number) the y-coordinate for the end of the line\r
+ @param settings (object) additional settings for the shape (optional)\r
+ @return (element) the new shape node */\r
+ line: function(parent, x1, y1, x2, y2, settings) {\r
+ var args = this._args(arguments, ['x1', 'y1', 'x2', 'y2']);\r
+ return this._makeNode(args.parent, 'line', $.extend(\r
+ {x1: args.x1, y1: args.y1, x2: args.x2, y2: args.y2}, args.settings || {}));\r
+ },\r
+\r
+ /* Draw a polygonal line.\r
+ @param parent (element or jQuery) the parent node for the new shape (optional)\r
+ @param points (number[][]) the x-/y-coordinates for the points on the line\r
+ @param settings (object) additional settings for the shape (optional)\r
+ @return (element) the new shape node */\r
+ polyline: function(parent, points, settings) {\r
+ var args = this._args(arguments, ['points']);\r
+ return this._poly(args.parent, 'polyline', args.points, args.settings);\r
+ },\r
+\r
+ /* Draw a polygonal shape.\r
+ @param parent (element or jQuery) the parent node for the new shape (optional)\r
+ @param points (number[][]) the x-/y-coordinates for the points on the shape\r
+ @param settings (object) additional settings for the shape (optional)\r
+ @return (element) the new shape node */\r
+ polygon: function(parent, points, settings) {\r
+ var args = this._args(arguments, ['points']);\r
+ return this._poly(args.parent, 'polygon', args.points, args.settings);\r
+ },\r
+\r
+ /* Draw a polygonal line or shape. */\r
+ _poly: function(parent, name, points, settings) {\r
+ var ps = '';\r
+ for (var i = 0; i < points.length; i++) {\r
+ ps += points[i].join() + ' ';\r
+ }\r
+ return this._makeNode(parent, name, $.extend(\r
+ {points: $.trim(ps)}, settings || {}));\r
+ },\r
+\r
+ /* Draw text.\r
+ Specify both of x and y or neither of them.\r
+ @param parent (element or jQuery) the parent node for the text (optional)\r
+ @param x (number or number[]) the x-coordinate(s) for the text (optional)\r
+ @param y (number or number[]) the y-coordinate(s) for the text (optional)\r
+ @param value (string) the text content or\r
+ (SVGText) text with spans and references\r
+ @param settings (object) additional settings for the text (optional)\r
+ @return (element) the new text node */\r
+ text: function(parent, x, y, value, settings) {\r
+ var args = this._args(arguments, ['x', 'y', 'value']);\r
+ if (typeof args.x == 'string' && arguments.length < 4) {\r
+ args.value = args.x;\r
+ args.settings = args.y;\r
+ args.x = args.y = null;\r
+ }\r
+ return this._text(args.parent, 'text', args.value, $.extend(\r
+ {x: (args.x && isArray(args.x) ? args.x.join(' ') : args.x),\r
+ y: (args.y && isArray(args.y) ? args.y.join(' ') : args.y)}, \r
+ args.settings || {}));\r
+ },\r
+\r
+ /* Draw text along a path.\r
+ @param parent (element or jQuery) the parent node for the text (optional)\r
+ @param path (string) the ID of the path\r
+ @param value (string) the text content or\r
+ (SVGText) text with spans and references\r
+ @param settings (object) additional settings for the text (optional)\r
+ @return (element) the new text node */\r
+ textpath: function(parent, path, value, settings) {\r
+ var args = this._args(arguments, ['path', 'value']);\r
+ var node = this._text(args.parent, 'textPath', args.value, args.settings || {});\r
+ node.setAttributeNS($.svg.xlinkNS, 'href', args.path);\r
+ return node;\r
+ },\r
+\r
+ /* Draw text. */\r
+ _text: function(parent, name, value, settings) {\r
+ var node = this._makeNode(parent, name, settings);\r
+ if (typeof value == 'string') {\r
+ node.appendChild(node.ownerDocument.createTextNode(value));\r
+ }\r
+ else {\r
+ for (var i = 0; i < value._parts.length; i++) {\r
+ var part = value._parts[i];\r
+ if (part[0] == 'tspan') {\r
+ var child = this._makeNode(node, part[0], part[2]);\r
+ child.appendChild(node.ownerDocument.createTextNode(part[1]));\r
+ node.appendChild(child);\r
+ }\r
+ else if (part[0] == 'tref') {\r
+ var child = this._makeNode(node, part[0], part[2]);\r
+ child.setAttributeNS($.svg.xlinkNS, 'href', part[1]);\r
+ node.appendChild(child);\r
+ }\r
+ else if (part[0] == 'textpath') {\r
+ var set = $.extend({}, part[2]);\r
+ set.href = null;\r
+ var child = this._makeNode(node, part[0], set);\r
+ child.setAttributeNS($.svg.xlinkNS, 'href', part[2].href);\r
+ child.appendChild(node.ownerDocument.createTextNode(part[1]));\r
+ node.appendChild(child);\r
+ }\r
+ else { // straight text\r
+ node.appendChild(node.ownerDocument.createTextNode(part[1]));\r
+ }\r
+ }\r
+ }\r
+ return node;\r
+ },\r
+\r
+ /* Add a custom SVG element.\r
+ @param parent (element or jQuery) the parent node for the new element (optional)\r
+ @param name (string) the name of the element\r
+ @param settings (object) additional settings for the element (optional)\r
+ @return (element) the new custom node */\r
+ other: function(parent, name, settings) {\r
+ var args = this._args(arguments, ['name']);\r
+ return this._makeNode(args.parent, args.name, args.settings || {});\r
+ },\r
+\r
+ /* Create a shape node with the given settings. */\r
+ _makeNode: function(parent, name, settings) {\r
+ parent = parent || this._svg;\r
+ var node = this._svg.ownerDocument.createElementNS($.svg.svgNS, name);\r
+ for (var name in settings) {\r
+ var value = settings[name];\r
+ if (value != null && value != null && \r
+ (typeof value != 'string' || value != '')) {\r
+ node.setAttribute($.svg._attrNames[name] || name, value);\r
+ }\r
+ }\r
+ parent.appendChild(node);\r
+ return node;\r
+ },\r
+\r
+ /* Add an existing SVG node to the diagram.\r
+ @param parent (element or jQuery) the parent node for the new node (optional)\r
+ @param node (element) the new node to add or\r
+ (string) the jQuery selector for the node or\r
+ (jQuery collection) set of nodes to add\r
+ @return (SVGWrapper) this wrapper */\r
+ add: function(parent, node) {\r
+ var args = this._args((arguments.length == 1 ? [null, parent] : arguments), ['node']);\r
+ var svg = this;\r
+ args.parent = args.parent || this._svg;\r
+ try {\r
+ if ($.svg._renesis) {\r
+ throw 'Force traversal';\r
+ }\r
+ args.parent.appendChild(args.node.cloneNode(true));\r
+ }\r
+ catch (e) {\r
+ args.node = (args.node.jquery ? args.node : $(args.node));\r
+ args.node.each(function() {\r
+ var child = svg._cloneAsSVG(this);\r
+ if (child) {\r
+ args.parent.appendChild(child);\r
+ }\r
+ });\r
+ }\r
+ return this;\r
+ },\r
+\r
+ /* SVG nodes must belong to the SVG namespace, so clone and ensure this is so. */\r
+ _cloneAsSVG: function(node) {\r
+ var newNode = null;\r
+ if (node.nodeType == 1) { // element\r
+ newNode = this._svg.ownerDocument.createElementNS(\r
+ $.svg.svgNS, this._checkName(node.nodeName));\r
+ for (var i = 0; i < node.attributes.length; i++) {\r
+ var attr = node.attributes.item(i);\r
+ if (attr.nodeName != 'xmlns' && attr.nodeValue) {\r
+ if (attr.prefix == 'xlink') {\r
+ newNode.setAttributeNS($.svg.xlinkNS, attr.localName, attr.nodeValue);\r
+ }\r
+ else {\r
+ newNode.setAttribute(this._checkName(attr.nodeName), attr.nodeValue);\r
+ }\r
+ }\r
+ }\r
+ for (var i = 0; i < node.childNodes.length; i++) {\r
+ var child = this._cloneAsSVG(node.childNodes[i]);\r
+ if (child) {\r
+ newNode.appendChild(child);\r
+ }\r
+ }\r
+ }\r
+ else if (node.nodeType == 3) { // text\r
+ if ($.trim(node.nodeValue)) {\r
+ newNode = this._svg.ownerDocument.createTextNode(node.nodeValue);\r
+ }\r
+ }\r
+ else if (node.nodeType == 4) { // CDATA\r
+ if ($.trim(node.nodeValue)) {\r
+ try {\r
+ newNode = this._svg.ownerDocument.createCDATASection(node.nodeValue);\r
+ }\r
+ catch (e) {\r
+ newNode = this._svg.ownerDocument.createTextNode(\r
+ node.nodeValue.replace(/&/g, '&').\r
+ replace(/</g, '<').replace(/>/g, '>'));\r
+ }\r
+ }\r
+ }\r
+ return newNode;\r
+ },\r
+\r
+ /* Node names must be lower case and without SVG namespace prefix. */\r
+ _checkName: function(name) {\r
+ name = (name.substring(0, 1) >= 'A' && name.substring(0, 1) <= 'Z' ?\r
+ name.toLowerCase() : name);\r
+ return (name.substring(0, 4) == 'svg:' ? name.substring(4) : name);\r
+ },\r
+\r
+ /* Load an external SVG document.\r
+ @param url (string) the location of the SVG document or\r
+ the actual SVG content\r
+ @param settings (boolean) see addTo below or\r
+ (function) see onLoad below or\r
+ (object) additional settings for the load with attributes below:\r
+ addTo (boolean) true to add to what's already there,\r
+ or false to clear the canvas first\r
+ changeSize (boolean) true to allow the canvas size to change,\r
+ or false to retain the original\r
+ onLoad (function) callback after the document has loaded,\r
+ 'this' is the container, receives SVG object and\r
+ optional error message as a parameter\r
+ @return (SVGWrapper) this root */\r
+ load: function(url, settings) {\r
+ settings = (typeof settings == 'boolean'? {addTo: settings} :\r
+ (typeof settings == 'function'? {onLoad: settings} : settings || {}));\r
+ if (!settings.addTo) {\r
+ this.clear(false);\r
+ }\r
+ var size = [this._svg.getAttribute('width'), this._svg.getAttribute('height')];\r
+ var wrapper = this;\r
+ // Report a problem with the load\r
+ var reportError = function(message) {\r
+ message = $.svg.local.errorLoadingText + ': ' + message;\r
+ if (settings.onLoad) {\r
+ settings.onLoad.apply(wrapper._container || wrapper._svg, [wrapper, message]);\r
+ }\r
+ else {\r
+ wrapper.text(null, 10, 20, message);\r
+ }\r
+ };\r
+ // Create a DOM from SVG content\r
+ var loadXML4IE = function(data) {\r
+ var xml = new ActiveXObject('Microsoft.XMLDOM');\r
+ xml.validateOnParse = false;\r
+ xml.resolveExternals = false;\r
+ xml.async = false;\r
+ xml.loadXML(data);\r
+ if (xml.parseError.errorCode != 0) {\r
+ reportError(xml.parseError.reason);\r
+ return null;\r
+ }\r
+ return xml;\r
+ };\r
+ // Load the SVG DOM\r
+ var loadSVG = function(data) {\r
+ if (!data) {\r
+ return;\r
+ }\r
+ if (data.documentElement.nodeName != 'svg') {\r
+ var errors = data.getElementsByTagName('parsererror');\r
+ var messages = (errors.length ? errors[0].getElementsByTagName('div') : []); // Safari\r
+ reportError(!errors.length ? '???' :\r
+ (messages.length ? messages[0] : errors[0]).firstChild.nodeValue);\r
+ return;\r
+ }\r
+ var attrs = {};\r
+ for (var i = 0; i < data.documentElement.attributes.length; i++) {\r
+ var attr = data.documentElement.attributes.item(i);\r
+ if (!(attr.nodeName == 'version' || attr.nodeName.substring(0, 5) == 'xmlns')) {\r
+ attrs[attr.nodeName] = attr.nodeValue;\r
+ }\r
+ }\r
+ wrapper.configure(attrs, true);\r
+ var nodes = data.documentElement.childNodes;\r
+ for (var i = 0; i < nodes.length; i++) {\r
+ try {\r
+ if ($.svg._renesis) {\r
+ throw 'Force traversal';\r
+ }\r
+ wrapper._svg.appendChild(nodes[i].cloneNode(true));\r
+ if (nodes[i].nodeName == 'script') {\r
+ $.globalEval(nodes[i].textContent);\r
+ }\r
+ }\r
+ catch (e) {\r
+ wrapper.add(null, nodes[i]);\r
+ }\r
+ }\r
+ if (!settings.changeSize) {\r
+ wrapper.configure({width: size[0], height: size[1]});\r
+ }\r
+ if (settings.onLoad) {\r
+ settings.onLoad.apply(wrapper._container || wrapper._svg, [wrapper]);\r
+ }\r
+ };\r
+ if (url.match('<svg')) { // Inline SVG\r
+ loadSVG($.browser.msie ? loadXML4IE(url) :\r
+ new DOMParser().parseFromString(url, 'text/xml'));\r
+ }\r
+ else { // Remote SVG\r
+ $.ajax({url: url, dataType: ($.browser.msie ? 'text' : 'xml'),\r
+ success: function(xml) {\r
+ loadSVG($.browser.msie ? loadXML4IE(xml) : xml);\r
+ }, error: function(http, message, exc) {\r
+ reportError(message + (exc ? ' ' + exc.message : ''));\r
+ }});\r
+ }\r
+ return this;\r
+ },\r
+\r
+ /* Delete a specified node.\r
+ @param node (element or jQuery) the drawing node to remove\r
+ @return (SVGWrapper) this root */\r
+ remove: function(node) {\r
+ node = (node.jquery ? node[0] : node);\r
+ node.parentNode.removeChild(node);\r
+ return this;\r
+ },\r
+\r
+ /* Delete everything in the current document.\r
+ @param attrsToo (boolean) true to clear any root attributes as well,\r
+ false to leave them (optional)\r
+ @return (SVGWrapper) this root */\r
+ clear: function(attrsToo) {\r
+ if (attrsToo) {\r
+ this.configure({}, true);\r
+ }\r
+ while (this._svg.firstChild) {\r
+ this._svg.removeChild(this._svg.firstChild);\r
+ }\r
+ return this;\r
+ },\r
+\r
+ /* Serialise the current diagram into an SVG text document.\r
+ @param node (SVG element) the starting node (optional)\r
+ @return (string) the SVG as text */\r
+ toSVG: function(node) {\r
+ node = node || this._svg;\r
+ return (typeof XMLSerializer == 'undefined' ? this._toSVG(node) :\r
+ new XMLSerializer().serializeToString(node));\r
+ },\r
+\r
+ /* Serialise one node in the SVG hierarchy. */\r
+ _toSVG: function(node) {\r
+ var svgDoc = '';\r
+ if (!node) {\r
+ return svgDoc;\r
+ }\r
+ if (node.nodeType == 3) { // Text\r
+ svgDoc = node.nodeValue;\r
+ }\r
+ else if (node.nodeType == 4) { // CDATA\r
+ svgDoc = '<![CDATA[' + node.nodeValue + ']]>';\r
+ }\r
+ else { // Element\r
+ svgDoc = '<' + node.nodeName;\r
+ if (node.attributes) {\r
+ for (var i = 0; i < node.attributes.length; i++) {\r
+ var attr = node.attributes.item(i);\r
+ if (!($.trim(attr.nodeValue) == '' || attr.nodeValue.match(/^\[object/) ||\r
+ attr.nodeValue.match(/^function/))) {\r
+ svgDoc += ' ' + (attr.namespaceURI == $.svg.xlinkNS ? 'xlink:' : '') + \r
+ attr.nodeName + '="' + attr.nodeValue + '"';\r
+ }\r
+ }\r
+ } \r
+ if (node.firstChild) {\r
+ svgDoc += '>';\r
+ var child = node.firstChild;\r
+ while (child) {\r
+ svgDoc += this._toSVG(child);\r
+ child = child.nextSibling;\r
+ }\r
+ svgDoc += '</' + node.nodeName + '>';\r
+ }\r
+ else {\r
+ svgDoc += '/>';\r
+ }\r
+ }\r
+ return svgDoc;\r
+ },\r
+ \r
+ /* Escape reserved characters in XML. */\r
+ _escapeXML: function(text) {\r
+ text = text.replace(/&/g, '&');\r
+ text = text.replace(/</g, '<');\r
+ text = text.replace(/>/g, '>');\r
+ return text;\r
+ }\r
+});\r
+\r
+/* Helper to generate an SVG path.\r
+ Obtain an instance from the SVGWrapper object.\r
+ String calls together to generate the path and use its value:\r
+ var path = root.createPath();\r
+ root.path(null, path.move(100, 100).line(300, 100).line(200, 300).close(), {fill: 'red'});\r
+ or\r
+ root.path(null, path.move(100, 100).line([[300, 100], [200, 300]]).close(), {fill: 'red'}); */\r
+function SVGPath() {\r
+ this._path = '';\r
+}\r
+\r
+$.extend(SVGPath.prototype, {\r
+ /* Prepare to create a new path.\r
+ @return (SVGPath) this path */\r
+ reset: function() {\r
+ this._path = '';\r
+ return this;\r
+ },\r
+\r
+ /* Move the pointer to a position.\r
+ @param x (number) x-coordinate to move to or\r
+ (number[][]) x-/y-coordinates to move to\r
+ @param y (number) y-coordinate to move to (omitted if x is array)\r
+ @param relative (boolean) true for coordinates relative to the current point,\r
+ false for coordinates being absolute\r
+ @return (SVGPath) this path */\r
+ move: function(x, y, relative) {\r
+ relative = (isArray(x) ? y : relative);\r
+ return this._coords((relative ? 'm' : 'M'), x, y);\r
+ },\r
+\r
+ /* Draw a line to a position.\r
+ @param x (number) x-coordinate to move to or\r
+ (number[][]) x-/y-coordinates to move to\r
+ @param y (number) y-coordinate to move to (omitted if x is array)\r
+ @param relative (boolean) true for coordinates relative to the current point,\r
+ false for coordinates being absolute\r
+ @return (SVGPath) this path */\r
+ line: function(x, y, relative) {\r
+ relative = (isArray(x) ? y : relative);\r
+ return this._coords((relative ? 'l' : 'L'), x, y);\r
+ },\r
+\r
+ /* Draw a horizontal line to a position.\r
+ @param x (number) x-coordinate to draw to or\r
+ (number[]) x-coordinates to draw to\r
+ @param relative (boolean) true for coordinates relative to the current point,\r
+ false for coordinates being absolute\r
+ @return (SVGPath) this path */\r
+ horiz: function(x, relative) {\r
+ this._path += (relative ? 'h' : 'H') + (isArray(x) ? x.join(' ') : x);\r
+ return this;\r
+ },\r
+\r
+ /* Draw a vertical line to a position.\r
+ @param y (number) y-coordinate to draw to or\r
+ (number[]) y-coordinates to draw to\r
+ @param relative (boolean) true for coordinates relative to the current point,\r
+ false for coordinates being absolute\r
+ @return (SVGPath) this path */\r
+ vert: function(y, relative) {\r
+ this._path += (relative ? 'v' : 'V') + (isArray(y) ? y.join(' ') : y);\r
+ return this;\r
+ },\r
+\r
+ /* Draw a cubic Bézier curve.\r
+ @param x1 (number) x-coordinate of beginning control point or\r
+ (number[][]) x-/y-coordinates of control and end points to draw to\r
+ @param y1 (number) y-coordinate of beginning control point (omitted if x1 is array)\r
+ @param x2 (number) x-coordinate of ending control point (omitted if x1 is array)\r
+ @param y2 (number) y-coordinate of ending control point (omitted if x1 is array)\r
+ @param x (number) x-coordinate of curve end (omitted if x1 is array)\r
+ @param y (number) y-coordinate of curve end (omitted if x1 is array)\r
+ @param relative (boolean) true for coordinates relative to the current point,\r
+ false for coordinates being absolute\r
+ @return (SVGPath) this path */\r
+ curveC: function(x1, y1, x2, y2, x, y, relative) {\r
+ relative = (isArray(x1) ? y1 : relative);\r
+ return this._coords((relative ? 'c' : 'C'), x1, y1, x2, y2, x, y);\r
+ },\r
+\r
+ /* Continue a cubic Bézier curve.\r
+ Starting control point is the reflection of the previous end control point.\r
+ @param x2 (number) x-coordinate of ending control point or\r
+ (number[][]) x-/y-coordinates of control and end points to draw to\r
+ @param y2 (number) y-coordinate of ending control point (omitted if x2 is array)\r
+ @param x (number) x-coordinate of curve end (omitted if x2 is array)\r
+ @param y (number) y-coordinate of curve end (omitted if x2 is array)\r
+ @param relative (boolean) true for coordinates relative to the current point,\r
+ false for coordinates being absolute\r
+ @return (SVGPath) this path */\r
+ smoothC: function(x2, y2, x, y, relative) {\r
+ relative = (isArray(x2) ? y2 : relative);\r
+ return this._coords((relative ? 's' : 'S'), x2, y2, x, y);\r
+ },\r
+\r
+ /* Draw a quadratic Bézier curve.\r
+ @param x1 (number) x-coordinate of control point or\r
+ (number[][]) x-/y-coordinates of control and end points to draw to\r
+ @param y1 (number) y-coordinate of control point (omitted if x1 is array)\r
+ @param x (number) x-coordinate of curve end (omitted if x1 is array)\r
+ @param y (number) y-coordinate of curve end (omitted if x1 is array)\r
+ @param relative (boolean) true for coordinates relative to the current point,\r
+ false for coordinates being absolute\r
+ @return (SVGPath) this path */\r
+ curveQ: function(x1, y1, x, y, relative) {\r
+ relative = (isArray(x1) ? y1 : relative);\r
+ return this._coords((relative ? 'q' : 'Q'), x1, y1, x, y);\r
+ },\r
+\r
+ /* Continue a quadratic Bézier curve.\r
+ Control point is the reflection of the previous control point.\r
+ @param x (number) x-coordinate of curve end or\r
+ (number[][]) x-/y-coordinates of points to draw to\r
+ @param y (number) y-coordinate of curve end (omitted if x is array)\r
+ @param relative (boolean) true for coordinates relative to the current point,\r
+ false for coordinates being absolute\r
+ @return (SVGPath) this path */\r
+ smoothQ: function(x, y, relative) {\r
+ relative = (isArray(x) ? y : relative);\r
+ return this._coords((relative ? 't' : 'T'), x, y);\r
+ },\r
+\r
+ /* Generate a path command with (a list of) coordinates. */\r
+ _coords: function(cmd, x1, y1, x2, y2, x3, y3) {\r
+ if (isArray(x1)) {\r
+ for (var i = 0; i < x1.length; i++) {\r
+ var cs = x1[i];\r
+ this._path += (i == 0 ? cmd : ' ') + cs[0] + ',' + cs[1] +\r
+ (cs.length < 4 ? '' : ' ' + cs[2] + ',' + cs[3] +\r
+ (cs.length < 6 ? '': ' ' + cs[4] + ',' + cs[5]));\r
+ }\r
+ }\r
+ else {\r
+ this._path += cmd + x1 + ',' + y1 + \r
+ (x2 == null ? '' : ' ' + x2 + ',' + y2 +\r
+ (x3 == null ? '' : ' ' + x3 + ',' + y3));\r
+ }\r
+ return this;\r
+ },\r
+\r
+ /* Draw an arc to a position.\r
+ @param rx (number) x-radius of arc or\r
+ (number/boolean[][]) x-/y-coordinates and flags for points to draw to\r
+ @param ry (number) y-radius of arc (omitted if rx is array)\r
+ @param xRotate (number) x-axis rotation (degrees, clockwise) (omitted if rx is array)\r
+ @param large (boolean) true to draw the large part of the arc,\r
+ false to draw the small part (omitted if rx is array)\r
+ @param clockwise (boolean) true to draw the clockwise arc,\r
+ false to draw the anti-clockwise arc (omitted if rx is array)\r
+ @param x (number) x-coordinate of arc end (omitted if rx is array)\r
+ @param y (number) y-coordinate of arc end (omitted if rx is array)\r
+ @param relative (boolean) true for coordinates relative to the current point,\r
+ false for coordinates being absolute\r
+ @return (SVGPath) this path */\r
+ arc: function(rx, ry, xRotate, large, clockwise, x, y, relative) {\r
+ relative = (isArray(rx) ? ry : relative);\r
+ this._path += (relative ? 'a' : 'A');\r
+ if (isArray(rx)) {\r
+ for (var i = 0; i < rx.length; i++) {\r
+ var cs = rx[i];\r
+ this._path += (i == 0 ? '' : ' ') + cs[0] + ',' + cs[1] + ' ' +\r
+ cs[2] + ' ' + (cs[3] ? '1' : '0') + ',' +\r
+ (cs[4] ? '1' : '0') + ' ' + cs[5] + ',' + cs[6];\r
+ }\r
+ }\r
+ else {\r
+ this._path += rx + ',' + ry + ' ' + xRotate + ' ' +\r
+ (large ? '1' : '0') + ',' + (clockwise ? '1' : '0') + ' ' + x + ',' + y;\r
+ }\r
+ return this;\r
+ },\r
+\r
+ /* Close the current path.\r
+ @return (SVGPath) this path */\r
+ close: function() {\r
+ this._path += 'z';\r
+ return this;\r
+ },\r
+\r
+ /* Return the string rendering of the specified path.\r
+ @return (string) stringified path */\r
+ path: function() {\r
+ return this._path;\r
+ }\r
+});\r
+\r
+SVGPath.prototype.moveTo = SVGPath.prototype.move;\r
+SVGPath.prototype.lineTo = SVGPath.prototype.line;\r
+SVGPath.prototype.horizTo = SVGPath.prototype.horiz;\r
+SVGPath.prototype.vertTo = SVGPath.prototype.vert;\r
+SVGPath.prototype.curveCTo = SVGPath.prototype.curveC;\r
+SVGPath.prototype.smoothCTo = SVGPath.prototype.smoothC;\r
+SVGPath.prototype.curveQTo = SVGPath.prototype.curveQ;\r
+SVGPath.prototype.smoothQTo = SVGPath.prototype.smoothQ;\r
+SVGPath.prototype.arcTo = SVGPath.prototype.arc;\r
+\r
+/* Helper to generate an SVG text object.\r
+ Obtain an instance from the SVGWrapper object.\r
+ String calls together to generate the text and use its value:\r
+ var text = root.createText();\r
+ root.text(null, x, y, text.string('This is ').\r
+ span('red', {fill: 'red'}).string('!'), {fill: 'blue'}); */\r
+function SVGText() {\r
+ this._parts = []; // The components of the text object\r
+}\r
+\r
+$.extend(SVGText.prototype, {\r
+ /* Prepare to create a new text object.\r
+ @return (SVGText) this text */\r
+ reset: function() {\r
+ this._parts = [];\r
+ return this;\r
+ },\r
+\r
+ /* Add a straight string value.\r
+ @param value (string) the actual text\r
+ @return (SVGText) this text object */\r
+ string: function(value) {\r
+ this._parts[this._parts.length] = ['text', value];\r
+ return this;\r
+ },\r
+\r
+ /* Add a separate text span that has its own settings.\r
+ @param value (string) the actual text\r
+ @param settings (object) the settings for this text\r
+ @return (SVGText) this text object */\r
+ span: function(value, settings) {\r
+ this._parts[this._parts.length] = ['tspan', value, settings];\r
+ return this;\r
+ },\r
+\r
+ /* Add a reference to a previously defined text string.\r
+ @param id (string) the ID of the actual text\r
+ @param settings (object) the settings for this text\r
+ @return (SVGText) this text object */\r
+ ref: function(id, settings) {\r
+ this._parts[this._parts.length] = ['tref', id, settings];\r
+ return this;\r
+ },\r
+\r
+ /* Add text drawn along a path.\r
+ @param id (string) the ID of the path\r
+ @param value (string) the actual text\r
+ @param settings (object) the settings for this text\r
+ @return (SVGText) this text object */\r
+ path: function(id, value, settings) {\r
+ this._parts[this._parts.length] = ['textpath', value, \r
+ $.extend({href: id}, settings || {})];\r
+ return this;\r
+ }\r
+});\r
+\r
+/* Attach the SVG functionality to a jQuery selection.\r
+ @param command (string) the command to run (optional, default 'attach')\r
+ @param options (object) the new settings to use for these SVG instances\r
+ @return jQuery (object) for chaining further calls */\r
+$.fn.svg = function(options) {\r
+ var otherArgs = Array.prototype.slice.call(arguments, 1);\r
+ if (typeof options == 'string' && options == 'get') {\r
+ return $.svg['_' + options + 'SVG'].apply($.svg, [this[0]].concat(otherArgs));\r
+ }\r
+ return this.each(function() {\r
+ if (typeof options == 'string') {\r
+ $.svg['_' + options + 'SVG'].apply($.svg, [this].concat(otherArgs));\r
+ }\r
+ else {\r
+ $.svg._attachSVG(this, options || {});\r
+ } \r
+ });\r
+};\r
+\r
+/* Determine whether an object is an array. */\r
+function isArray(a) {\r
+ return (a && a.constructor == Array);\r
+}\r
+\r
+// Singleton primary SVG interface\r
+$.svg = new SVGManager();\r
+\r
+})(jQuery);\r
projects / scpubgit/stemmatology.git / commitdiff
