X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..refs/heads/master:/docs/source/Svg.html
diff --git a/docs/source/Svg.html b/docs/source/Svg.html
index d9bd3691..47ed824d 100644
--- a/docs/source/Svg.html
+++ b/docs/source/Svg.html
@@ -1,4 +1,21 @@
-Sencha Documentation Project/**
+
+
+
+
+ The source code
+
+
+
+
+
+
+ /**
* @class Ext.draw.engine.Svg
* @extends Ext.draw.Surface
* Provides specific methods to draw with SVG.
@@ -9,7 +26,7 @@ Ext.define('Ext.draw.engine.Svg', {
extend: 'Ext.draw.Surface',
- requires: ['Ext.draw.Draw', 'Ext.draw.Sprite', 'Ext.draw.Matrix', 'Ext.core.Element'],
+ requires: ['Ext.draw.Draw', 'Ext.draw.Sprite', 'Ext.draw.Matrix', 'Ext.Element'],
/* End Definitions */
@@ -29,6 +46,8 @@ Ext.define('Ext.draw.engine.Svg', {
strokeOpacity: "stroke-opacity",
strokeLinejoin: "stroke-linejoin"
},
+
+ parsers: {},
minDefaults: {
circle: {
@@ -229,7 +248,7 @@ Ext.define('Ext.draw.engine.Svg', {
me.callParent([w, h]);
},
- /**
+ /**
* Get the region for the surface's canvas area
* @returns {Ext.util.Region}
*/
@@ -437,6 +456,12 @@ Ext.define('Ext.draw.engine.Svg', {
el = sprite.el,
group = sprite.group,
sattr = sprite.attr,
+ parsers = me.parsers,
+ //Safari does not handle linear gradients correctly in quirksmode
+ //ref: https://bugs.webkit.org/show_bug.cgi?id=41952
+ //ref: EXTJSIV-1472
+ gradientsMap = me.gradientsMap || {},
+ safariFix = Ext.isSafari && !Ext.isStrict,
groups, i, ln, attrs, font, key, style, name, rect;
if (group) {
@@ -451,8 +476,8 @@ Ext.define('Ext.draw.engine.Svg', {
attrs = me.scrubAttrs(sprite) || {};
// if (sprite.dirtyPath) {
- sprite.bbox.plain = 0;
- sprite.bbox.transform = 0;
+ sprite.bbox.plain = 0;
+ sprite.bbox.transform = 0;
if (sprite.type == "circle" || sprite.type == "ellipse") {
attrs.cx = attrs.cx || attrs.x;
attrs.cy = attrs.cy || attrs.y;
@@ -461,10 +486,13 @@ Ext.define('Ext.draw.engine.Svg', {
attrs.rx = attrs.ry = attrs.r;
}
else if (sprite.type == "path" && attrs.d) {
- attrs.d = Ext.draw.Draw.pathToAbsolute(attrs.d);
+ attrs.d = Ext.draw.Draw.pathToString(Ext.draw.Draw.pathToAbsolute(attrs.d));
}
sprite.dirtyPath = false;
// }
+ // else {
+ // delete attrs.d;
+ // }
if (attrs['clip-rect']) {
me.setClip(sprite, attrs);
@@ -485,9 +513,22 @@ Ext.define('Ext.draw.engine.Svg', {
}
for (key in attrs) {
if (attrs.hasOwnProperty(key) && attrs[key] != null) {
- el.dom.setAttribute(key, String(attrs[key]));
+ //Safari does not handle linear gradients correctly in quirksmode
+ //ref: https://bugs.webkit.org/show_bug.cgi?id=41952
+ //ref: EXTJSIV-1472
+ //if we're Safari in QuirksMode and we're applying some color attribute and the value of that
+ //attribute is a reference to a gradient then assign a plain color to that value instead of the gradient.
+ if (safariFix && ('color|stroke|fill'.indexOf(key) > -1) && (attrs[key] in gradientsMap)) {
+ attrs[key] = gradientsMap[attrs[key]];
+ }
+ if (key in parsers) {
+ el.dom.setAttribute(key, parsers[key](attrs[key], sprite, me));
+ } else {
+ el.dom.setAttribute(key, attrs[key]);
+ }
}
}
+
if (sprite.type == 'text') {
me.tuneText(sprite, attrs);
}
@@ -537,22 +578,24 @@ Ext.define('Ext.draw.engine.Svg', {
// }
},
- /**
+ /**
* Insert or move a given sprite's element to the correct place in the DOM list for its zIndex
* @param {Ext.draw.Sprite} sprite
*/
applyZIndex: function(sprite) {
- var idx = this.normalizeSpriteCollection(sprite),
+ var me = this,
+ items = me.items,
+ idx = items.indexOf(sprite),
el = sprite.el,
prevEl;
- if (this.el.dom.childNodes[idx + 2] !== el.dom) { //shift by 2 to account for defs and bg rect
+ if (me.el.dom.childNodes[idx + 2] !== el.dom) { //shift by 2 to account for defs and bg rect
if (idx > 0) {
// Find the first previous sprite which has its DOM element created already
do {
- prevEl = this.items.getAt(--idx).el;
+ prevEl = items.getAt(--idx).el;
} while (!prevEl && idx > 0);
}
- el.insertAfter(prevEl || this.bgRect);
+ el.insertAfter(prevEl || me.bgRect);
}
sprite.zIndexDirty = false;
},
@@ -565,43 +608,52 @@ Ext.define('Ext.draw.engine.Svg', {
addGradient: function(gradient) {
gradient = Ext.draw.Draw.parseGradient(gradient);
- var ln = gradient.stops.length,
+ var me = this,
+ ln = gradient.stops.length,
vector = gradient.vector,
- gradientEl,
- stop,
- stopEl,
- i;
- if (gradient.type == "linear") {
- gradientEl = this.createSvgElement("linearGradient");
- gradientEl.setAttribute("x1", vector[0]);
- gradientEl.setAttribute("y1", vector[1]);
- gradientEl.setAttribute("x2", vector[2]);
- gradientEl.setAttribute("y2", vector[3]);
- }
- else {
- gradientEl = this.createSvgElement("radialGradient");
- gradientEl.setAttribute("cx", gradient.centerX);
- gradientEl.setAttribute("cy", gradient.centerY);
- gradientEl.setAttribute("r", gradient.radius);
- if (Ext.isNumber(gradient.focalX) && Ext.isNumber(gradient.focalY)) {
- gradientEl.setAttribute("fx", gradient.focalX);
- gradientEl.setAttribute("fy", gradient.focalY);
+ //Safari does not handle linear gradients correctly in quirksmode
+ //ref: https://bugs.webkit.org/show_bug.cgi?id=41952
+ //ref: EXTJSIV-1472
+ usePlain = Ext.isSafari && !Ext.isStrict,
+ gradientEl, stop, stopEl, i, gradientsMap;
+
+ gradientsMap = me.gradientsMap || {};
+
+ if (!usePlain) {
+ if (gradient.type == "linear") {
+ gradientEl = me.createSvgElement("linearGradient");
+ gradientEl.setAttribute("x1", vector[0]);
+ gradientEl.setAttribute("y1", vector[1]);
+ gradientEl.setAttribute("x2", vector[2]);
+ gradientEl.setAttribute("y2", vector[3]);
}
- }
- gradientEl.id = gradient.id;
- this.getDefs().appendChild(gradientEl);
-
- for (i = 0; i < ln; i++) {
- stop = gradient.stops[i];
- stopEl = this.createSvgElement("stop");
- stopEl.setAttribute("offset", stop.offset + "%");
- stopEl.setAttribute("stop-color", stop.color);
- stopEl.setAttribute("stop-opacity",stop.opacity);
- gradientEl.appendChild(stopEl);
+ else {
+ gradientEl = me.createSvgElement("radialGradient");
+ gradientEl.setAttribute("cx", gradient.centerX);
+ gradientEl.setAttribute("cy", gradient.centerY);
+ gradientEl.setAttribute("r", gradient.radius);
+ if (Ext.isNumber(gradient.focalX) && Ext.isNumber(gradient.focalY)) {
+ gradientEl.setAttribute("fx", gradient.focalX);
+ gradientEl.setAttribute("fy", gradient.focalY);
+ }
+ }
+ gradientEl.id = gradient.id;
+ me.getDefs().appendChild(gradientEl);
+ for (i = 0; i < ln; i++) {
+ stop = gradient.stops[i];
+ stopEl = me.createSvgElement("stop");
+ stopEl.setAttribute("offset", stop.offset + "%");
+ stopEl.setAttribute("stop-color", stop.color);
+ stopEl.setAttribute("stop-opacity",stop.opacity);
+ gradientEl.appendChild(stopEl);
+ }
+ } else {
+ gradientsMap['url(#' + gradient.id + ')'] = gradient.stops[0].color;
}
+ me.gradientsMap = gradientsMap;
},
- /**
+ /**
* Checks if the specified CSS class exists on this element's DOM node.
* @param {String} className The CSS class to check for
* @return {Boolean} True if the class exists, else false
@@ -652,7 +704,7 @@ Ext.define('Ext.draw.engine.Svg', {
cls = cls.replace(me.trimRe, '');
idx = Ext.Array.indexOf(elClasses, cls);
if (idx != -1) {
- elClasses.splice(idx, 1);
+ Ext.Array.erase(elClasses, idx, 1);
}
}
}
@@ -669,4 +721,6 @@ Ext.define('Ext.draw.engine.Svg', {
}
delete me.el;
}
-});
\ No newline at end of file
+});
+
+