evert/svgcanvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

split up rgba for illustrator import support

Browse Source
This commit is contained in:
kerryliu 2014-02-21 17:16:14 -08:00
parent f4500ef181
commit 64cee40038
2 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
canvas2svg.js
View File

@ -1,5 +1,5 @@
/*! /*!
* Canvas 2 Svg v1.0.1 * Canvas 2 Svg v1.0.2
* A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document. * A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document.
* *
* Licensed under the MIT license: * Licensed under the MIT license:
@ -311,7 +311,7 @@
* @private * @private
*/ */
ctx.prototype.__applyStyleToCurrentElement = function(type) { ctx.prototype.__applyStyleToCurrentElement = function(type) {
var keys = Object.keys(STYLES), i, style, value, id; var keys = Object.keys(STYLES), i, style, value, id, regex, matches;
for(i=0; i<keys.length; i++) { for(i=0; i<keys.length; i++) {
style = STYLES[keys[i]]; style = STYLES[keys[i]];
value = this[keys[i]]; value = this[keys[i]];
@ -333,8 +333,16 @@
//gradient //gradient
this.__currentElement.setAttribute("fill", format("url(#{id})", {id:value.__root.getAttribute("id")})); this.__currentElement.setAttribute("fill", format("url(#{id})", {id:value.__root.getAttribute("id")}));
} else if(style.apply.indexOf(type)!==-1 && style.svg !== value) { } else if(style.apply.indexOf(type)!==-1 && style.svg !== value) {
//otherwise only update attribute if right type, and not svg default if((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) {
this.__currentElement.setAttribute(style.svgAttr, value); //separate alpha value, since illustrator can't handle it
regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
matches = regex.exec(value);
this.__currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
this.__currentElement.setAttribute(style.svgAttr+"-opacity", matches[4]);
} else {
//otherwise only update attribute if right type, and not svg default
this.__currentElement.setAttribute(style.svgAttr, value);
}
} }
} }
} }

22
jasmine-tests/spec/canvas2svgspec.js
View File

@ -122,4 +122,26 @@ describe("canvas2svg", function() {
}); });
}); });
describe("will split up rgba", function() {
//while browsers support rgba values for fill/stroke, this is not accepted in visio/illustrator
it("to fill and fill-opacity", function() {
var ctx = new C2S();
ctx.fillStyle="rgba(20,40,50,0.5)";
ctx.fillRect(100,100,100,100);
var svg = ctx.getSvg();
expect(svg.querySelector("rect").getAttribute("fill")).toBe("rgb(20,40,50)");
expect(svg.querySelector("rect").getAttribute("fill-opacity")).toBe("0.5");
});
it("to stroke and stroke-opacity", function() {
var ctx = new C2S();
ctx.strokeStyle="rgba(10,20,30,0.4)";
ctx.strokeRect(100,100,100,100);
var svg = ctx.getSvg();
expect(svg.querySelector("rect").getAttribute("stroke")).toBe("rgb(10,20,30)");
expect(svg.querySelector("rect").getAttribute("stroke-opacity")).toBe("0.4");
});
});
}); });