mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

fix: external styles on svg elements (#2320)

Browse Source
This commit is contained in:
Niklas von Hertzen
2020-08-09 14:14:50 +08:00
committed by GitHub
parent d07b6811c6
commit 1514220812
5 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/dom/document-cloner.ts
View File

@@ -116,7 +116,7 @@ export class DocumentCloner {
return iframeLoad;
}
createElementClone(node: HTMLElement): HTMLElement {
createElementClone<T extends HTMLElement | SVGElement>(node: T): HTMLElement | SVGElement {
if (isCanvasElement(node)) {
return this.createCanvasClone(node);
}
@@ -129,8 +129,7 @@ export class DocumentCloner {
return this.createStyleClone(node);
}
const clone = node.cloneNode(false) as HTMLElement;
const clone = node.cloneNode(false) as T;
// @ts-ignore
if (isImageElement(clone) && clone.loading === 'lazy') {
// @ts-ignore
@@ -266,14 +265,14 @@ export class DocumentCloner {
const window = node.ownerDocument.defaultView;
if (isHTMLElementNode(node) && window) {
if (window && isElementNode(node) && (isHTMLElementNode(node) || isSVGElementNode(node))) {
const clone = this.createElementClone(node);
const style = window.getComputedStyle(node);
const styleBefore = window.getComputedStyle(node, ':before');
const styleAfter = window.getComputedStyle(node, ':after');
if (this.referenceElement === node) {
if (this.referenceElement === node && isHTMLElementNode(clone)) {
this.clonedReferenceElement = clone;
}
if (isBodyElement(clone)) {
@@ -307,7 +306,7 @@ export class DocumentCloner {
this.counters.pop(counters);
if (style && this.options.copyStyles && !isIFrameElement(node)) {
if (style && (this.options.copyStyles || isSVGElementNode(node)) && !isIFrameElement(node)) {
copyCSSStyles(style, clone);
}
@@ -487,7 +486,7 @@ const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> =>
});
};
export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement): HTMLElement => {
export const copyCSSStyles = <T extends HTMLElement | SVGElement>(style: CSSStyleDeclaration, target: T): T => {
// Edge does not provide value for cssText
for (let i = style.length - 1; i >= 0; i--) {
const property = style.item(i);

2
src/dom/node-parser.ts
View File

@@ -102,7 +102,7 @@ const createsStackingContext = (styles: CSSParsedDeclaration): boolean => styles
export const isTextNode = (node: Node): node is Text => node.nodeType === Node.TEXT_NODE;
export const isElementNode = (node: Node): node is Element => node.nodeType === Node.ELEMENT_NODE;
export const isHTMLElementNode = (node: Node): node is HTMLElement =>
typeof (node as HTMLElement).style !== 'undefined';
isElementNode(node) && typeof (node as HTMLElement).style !== 'undefined' && !isSVGElementNode(node);
export const isSVGElementNode = (element: Element): element is SVGElement =>
typeof (element as SVGElement).className === 'object';
export const isLIElement = (node: Element): node is HTMLLIElement => node.tagName === 'LI';