Skip to content

Commit

Permalink
Bugfix: only style one element with (fill|stroke)(Text|Rect)
Browse files Browse the repository at this point in the history
  • Loading branch information
murkle authored Jul 8, 2021
1 parent 09d09d2 commit 937628f
Showing 1 changed file with 20 additions and 11 deletions.
31 changes: 20 additions & 11 deletions canvas2svg.js
Original file line number Diff line number Diff line change
Expand Up @@ -346,7 +346,7 @@
};

/**
* Apples the current styles to the current SVG element. On "ctx.fill" or "ctx.stroke"
* Applies the current styles to the current SVG element. On "ctx.fill" or "ctx.stroke"
* @param type
* @private
*/
Expand All @@ -360,7 +360,16 @@
node.setAttribute(type, "");
})
}
this.__applyStyleToElement(currentElement, type);
}

/**
* Applies the current styles to the given SVG element. On "ctx.fill" or "ctx.stroke"
* param element
* @param type
* @private
*/
ctx.prototype.__applyStyleToElement = function (element, type) {
var keys = Object.keys(STYLES), i, style, value, id, regex, matches;
for (i = 0; i < keys.length; i++) {
style = STYLES[keys[i]];
Expand All @@ -378,35 +387,35 @@
this.__defs.appendChild(value.__ctx.__defs.childNodes[i]);
}
}
currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")}));
element.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")}));
}
else if (value instanceof CanvasGradient) {
//gradient
currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")}));
element.setAttribute(style.apply, 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);
currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
element.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
//should take globalAlpha here
var opacity = matches[4];
var globalAlpha = this.globalAlpha;
if (globalAlpha != null) {
opacity *= globalAlpha;
}
currentElement.setAttribute(style.svgAttr+"-opacity", opacity);
element.setAttribute(style.svgAttr+"-opacity", opacity);
} else {
var attr = style.svgAttr;
if (keys[i] === 'globalAlpha') {
attr = type+'-'+style.svgAttr;
if (currentElement.getAttribute(attr)) {
if (element.getAttribute(attr)) {
//fill-opacity or stroke-opacity has already been set by stroke or fill.
continue;
}
}
//otherwise only update attribute if right type, and not svg default
currentElement.setAttribute(attr, value);
element.setAttribute(attr, value);
}
}
}
Expand Down Expand Up @@ -800,7 +809,7 @@
parent = this.__closestGroupOrSvg();
parent.appendChild(rect);
this.__currentElement = rect;
this.__applyStyleToCurrentElement("fill");
this.__applyStyleToElement(rect, "fill");
};

/**
Expand All @@ -821,7 +830,7 @@
parent = this.__closestGroupOrSvg();
parent.appendChild(rect);
this.__currentElement = rect;
this.__applyStyleToCurrentElement("stroke");
this.__applyStyleToElement(rect, "stroke");
};


Expand Down Expand Up @@ -975,7 +984,7 @@

textElement.appendChild(this.__document.createTextNode(text));
this.__currentElement = textElement;
this.__applyStyleToCurrentElement(action);
this.__applyStyleToElement(textElement, action);
parent.appendChild(this.__wrapTextLink(font,textElement));
};

Expand Down Expand Up @@ -1112,7 +1121,7 @@
dw = args[7];
dh = args[8];
} else {
throw new Error("Invalid number of arguments passed to drawImage: " + arguments.length);
throw new Error("Inavlid number of arguments passed to drawImage: " + arguments.length);
}

parent = this.__closestGroupOrSvg();
Expand Down

0 comments on commit 937628f

Please sign in to comment.