Html2canvas: Стили классов SVG не отображаются

Созданный на 10 янв. 2018  ·  7Комментарии  ·  Источник: niklasvh/html2canvas

Версия: 1.0.0-alpha.9
Проблема: похоже, что классы, применяемые к элементам SVG (и их дочерним элементам), не применяются к экспортированным изображениям.
Однако, если эти стили применяются во встроенном атрибуте style, они применяются правильно.

Я заметил, что с шрифтом, цветом и заливкой возникают проблемы.

скрипка: http://jsfiddle.net/patgoins/2d90yop3/

--Примеры--
Экспортированное изображение:
exportusinghtml2canvas

Просмотр HTML:
ui_screenshot

picture Saabertooth
👍2

Самый полезный комментарий

Я не знаю, можно ли назвать это «исправлением», но я придумал обходной путь для этой проблемы.

Суть этого обходного пути состоит в выявлении проблемных свойств CSS, которые не отображаются, а затем в сканировании dom и встраивании этих стилей везде, где они находятся в элементе.

Следующий код - это TypeScript, но его можно легко изменить для ванильного JS. Я вызываю этот метод непосредственно перед вызовом метода html2canvas (..):

private setInlineStyles(targetElem: HTMLElement) {

        const transformProperties = [
            'fill',
            'color',
            'font-size',
            'stroke',
            'font'
        ];

        let svgElems = Array.from(targetElem.getElementsByTagName("svg"));

        for (let svgElement of svgElems) {
            recurseElementChildren(svgElement);
        }

        function recurseElementChildren(node: SVGSVGElement | HTMLElement) {
            if (!node.style)
                return;

            let styles = getComputedStyle(node);

            for (let transformProperty of transformProperties) {
                node.style[transformProperty] = styles[transformProperty];
            }

            for (let child of Array.from(node.childNodes)) {
                recurseElementChildren(child as SVGSVGElement);
            }
        }
    }

targetElem - это просто ссылка на элемент html и может быть отдельным элементом SVG или даже целым элементом <body> если вы захотите

picture Saabertooth 30 янв. 2018
👍12 ❤5 🚀4

Все 7 Комментарий

У меня очень похожая проблема с некоторыми диаграммами SVG, которые есть в моем приложении.

PoeDameron picture PoeDameron 10 янв. 2018

Мне просто интересно, знает ли кто-нибудь из команды HTML2Canvas или кто-либо на этом форуме, почему возникает эта проблема?

PoeDameron picture PoeDameron 15 янв. 2018

Я не знаю, можно ли назвать это «исправлением», но я придумал обходной путь для этой проблемы.

Суть этого обходного пути состоит в выявлении проблемных свойств CSS, которые не отображаются, а затем в сканировании dom и встраивании этих стилей везде, где они находятся в элементе.

Следующий код - это TypeScript, но его можно легко изменить для ванильного JS. Я вызываю этот метод непосредственно перед вызовом метода html2canvas (..):

private setInlineStyles(targetElem: HTMLElement) {

        const transformProperties = [
            'fill',
            'color',
            'font-size',
            'stroke',
            'font'
        ];

        let svgElems = Array.from(targetElem.getElementsByTagName("svg"));

        for (let svgElement of svgElems) {
            recurseElementChildren(svgElement);
        }

        function recurseElementChildren(node: SVGSVGElement | HTMLElement) {
            if (!node.style)
                return;

            let styles = getComputedStyle(node);

            for (let transformProperty of transformProperties) {
                node.style[transformProperty] = styles[transformProperty];
            }

            for (let child of Array.from(node.childNodes)) {
                recurseElementChildren(child as SVGSVGElement);
            }
        }
    }

targetElem - это просто ссылка на элемент html и может быть отдельным элементом SVG или даже целым элементом <body> если вы захотите

Saabertooth picture Saabertooth 30 янв. 2018
👍12 ❤5 🚀4

У меня аналогичная проблема, но разница в том, что содержимое svg, которое выходит из элемента svg, не отображается, по умолчанию в "таблице стилей пользовательского агента" указано, что переполнение svg скрыто, но у меня есть класс для элемента svg, где у меня есть замените свойство переполнения на «overflow: visible! important;». но все же, хотя я пытался применить свойство переполнения во время выполнения непосредственно перед вызовом функции html2canvas (...), похоже, это не сработало.

Roy1990 picture Roy1990 29 июл. 2019

Обход более чем хорош, но я думаю, что эту проблему не следует закрывать.

dvkndn picture dvkndn 23 авг. 2020

Да, кстати, по какой-то странной причине (август 2020 г.) стили классов отлично работают для firefox и chrome. Только Safari здесь остается проблемным

dvkndn picture dvkndn 23 авг. 2020

такая же проблема здесь. Firefox и Chrome в порядке. Но у сафари есть такая проблема.

ronny1020 picture ronny1020 4 сент. 2020
Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

AlphaDu picture AlphaDu  ·  4Комментарии
Juliazhong picture Juliazhong  ·  4Комментарии
tibewww picture tibewww  ·  4Комментарии
Loki180 picture Loki180  ·  4Комментарии
koreanman picture koreanman  ·  4Комментарии