Fix to reflect textAlign property to SVG export (#1375)

This commit is contained in:
fujimoto kyosuke 2020-04-12 01:17:20 +09:00 committed by GitHub
parent 7b3816d0d3
commit 166ad0412c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -447,7 +447,13 @@ export function renderElementToSvg(
); );
const lines = element.text.replace(/\r\n?/g, "\n").split("\n"); const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
const lineHeight = element.height / lines.length; const lineHeight = element.height / lines.length;
const offset = element.height - element.baseline; const verticalOffset = element.height - element.baseline;
const horizontalOffset =
element.textAlign === "center"
? element.width / 2
: element.textAlign === "right"
? element.width
: 0;
const fontSplit = element.font.split(" ").filter((d) => !!d.trim()); const fontSplit = element.font.split(" ").filter((d) => !!d.trim());
let fontFamily = fontSplit[0]; let fontFamily = fontSplit[0];
let fontSize = "20px"; let fontSize = "20px";
@ -455,14 +461,21 @@ export function renderElementToSvg(
fontFamily = fontSplit[1]; fontFamily = fontSplit[1];
fontSize = fontSplit[0]; fontSize = fontSplit[0];
} }
const textAnchor =
element.textAlign === "center"
? "middle"
: element.textAlign === "right"
? "end"
: "start";
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
const text = svgRoot.ownerDocument!.createElementNS(SVG_NS, "text"); const text = svgRoot.ownerDocument!.createElementNS(SVG_NS, "text");
text.textContent = lines[i]; text.textContent = lines[i];
text.setAttribute("x", "0"); text.setAttribute("x", `${horizontalOffset}`);
text.setAttribute("y", `${(i + 1) * lineHeight - offset}`); text.setAttribute("y", `${(i + 1) * lineHeight - verticalOffset}`);
text.setAttribute("font-family", fontFamily); text.setAttribute("font-family", fontFamily);
text.setAttribute("font-size", fontSize); text.setAttribute("font-size", fontSize);
text.setAttribute("fill", element.strokeColor); text.setAttribute("fill", element.strokeColor);
text.setAttribute("text-anchor", textAnchor);
node.appendChild(text); node.appendChild(text);
} }
svgRoot.appendChild(node); svgRoot.appendChild(node);