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

12
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.
*
* Licensed under the MIT license:
@ -311,7 +311,7 @@
* @private
*/
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++) {
style = STYLES[keys[i]];
value = this[keys[i]];
@ -333,11 +333,19 @@
//gradient
this.__currentElement.setAttribute("fill", format("url(#{id})", {id:value.__root.getAttribute("id")}));
} else if(style.apply.indexOf(type)!==-1 && style.svg !== value) {
if((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) {
//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");
});
});
});