SVG text elements return fills that work in Illustrator.

nodebox · May 25, 2018 · 3bd5e85 · 3bd5e85
1 parent 1ad5b5a
commit 3bd5e85
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/libraries/vg/objects/color.js b/src/libraries/vg/objects/color.js
@@ -177,8 +177,8 @@ Color.prototype.toCSS = function () {
     return Color.toCSS(this);
 };
 
-Color.prototype.toHex = function () {
-    if (this.a >= 1) {
+Color.prototype.toHex = function (ignoreAlpha) {
+    if (ignoreAlpha || this.a >= 1) {
         return color.rgb2hex(this.r, this.g, this.b);
     } else {
         return color.rgba2hex(this.r, this.g, this.b, this.a);
@@ -237,8 +237,8 @@ Color.toCSS = function (c) {
     }
 };
 
-Color.toHex = function (c) {
-    return Color.parse(c).toHex();
+Color.toHex = function (c, ignoreAlpha) {
+    return Color.parse(c, ignoreAlpha).toHex();
 };
 
 Color.make = function () {

diff --git a/src/libraries/vg/objects/text.js b/src/libraries/vg/objects/text.js
@@ -172,7 +172,11 @@ GText.prototype.toSVG = function () {
     }
     svg += ' text-anchor="' + textAnchor + '"';
     if (this.fill !== 'black') {
-        svg += ' fill="' + Color.toCSS(this.fill) + '"';
+        var fill = Color.parse(this.fill);
+        svg += ' fill="' + fill.toHex(true) + '"';
+        if (fill.a < 1) {
+            svg += ' opacity="' + fill.a + '"';
+        }
     }
     if (!this.transform.isIdentity()) {
         svg += ' transform="matrix(' + this.transform.m.join(',') + ')"';

diff --git a/test/textSpec.js b/test/textSpec.js
@@ -25,4 +25,10 @@ describe('The text object', function () {
         assert.equal(t.toSVG(), '<text x="0" y="0" font-family="sans-serif" font-size="24" text-anchor="start" transform="matrix(1,0,0,1,10,20)">Hello</text>');
     });
 
+    it('specifies SVG colors compatible with Illustrator', function () {
+        var t = new g.Text('Hello');
+        t.fill = new g.Color(1, 0, 0, 0.5);
+        assert.equal(t.toSVG(), '<text x="0" y="0" font-family="sans-serif" font-size="24" text-anchor="start" fill="#FF0000" opacity="0.5">Hello</text>');
+    });
+
 });