Html2canvas: Захватить SVG

Нет. Это не ошибка библиотеки, а ошибка в большинстве браузеров (в последней стабильной версии Firefox 12, эта проблема исправлена, и это единственная ошибка, в которой она работает должным образом, afaik). Проблема в том, что любое изображение SVG портит холст, делая его нечитаемым. По умолчанию html2canvas игнорирует контент, портящий изображение, поскольку мы хотим, чтобы холст оставался читаемым (например, если вы хотите использовать toDataUrl ).

Если, однако, вас не волнует, что изображения SVG загрязняют холст, вы можете установить для параметра allowTaint значение true и SVG должны отображаться правильно для браузеров, поддерживающих встроенный SVG.

Я также хотел бы отметить, что если рендеринг SVG будет корректно работать в кросс-браузере, эта библиотека станет почти устаревшей, поскольку SVG можно использовать для рендеринга HTML. Я уже написал код, который значительно ускоряет рендеринг холста в браузерах, в которых работает рендеринг SVG (например, FF12), а также разрешает поддержку всех свойств CSS, поддерживаемых браузером. Для получения информации посетите https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L1227.

Здравствуйте,
Большое спасибо за быстрый ответ.
Я пробовал, как ваши предложения: установите для allowTaint значение true, как показано ниже (измените test.js):

setTimeout (function () {

        $(h2cSelector).html2canvas($.extend({
            flashcanvas: "../external/flashcanvas.min.js",
            logging: true,
            profile: true,
            useCORS: true,
            allowTaint: true
        }, h2cOptions));
    }, 100);

Он успешно отображает SVG в примере images.html.

Но если SVG более сложный, он некорректно отображается в кросс-браузере. Например: я хотел бы захватить диаграмму (http://www.highcharts.com/demo/) в Chrome: она просто захватывает ось x и ось y диаграммы, когда диаграмма отображается как встроенный SVG, в случае диаграммы визуализировать как img с исходным кодом из extenal svg файла, он ничего не захватывает.
В отличие от Chrome, в Firefox он ничего не захватывает при рендеринге диаграммы как встроенный SVG, но может успешно захватывать диаграмму, когда диаграмма является изображением из внешнего файла SVG. Хуже всего в IE9, ничего не фиксируется.

У вас есть идея решить эту проблему?

Использование в качестве изображения должно работать для FF / Chrome. Что вы можете попробовать, так это то, работает ли простой рендеринг холста с использованием drawImage с SVG.

+1 за это. У меня тот же случай использования, что и у babyhero, мне нужно сделать снимок экрана с графиками SVG highcharts для инструмента отчетности. Возможно, можно было бы получить все SVG-изображения с высокими диаграммами по отдельности, но они отображаются в представлении с другой информацией, для которой мы хотели бы иметь возможность «Сохранить в снимок экрана».

@ babyhero184 Я обошел это ограничение в html2canvas, используя canvg (http://code.google.com/p/canvg/) для преобразования SVG highcharts в PNG на лету, скрывая элементы SVG и показывая PNG. Затем я сделал снимок экрана на лету с помощью html2canvas, затем скрывал PNG и снова показал SVG с высокими диаграммами. Это обходной процесс (SVG -> холст -> PNG -> холст -> PNG), но он работает для моих нужд.

@joeyrobert Я тоже сталкиваюсь с той же проблемой с highcharts и html2canvas. Будет большим подспорьем, если вы поделитесь сутью своего кода.
Заранее спасибо.

@joeyrobert @ Jagdeep1 другой вариант - использовать Fabric.js для рендеринга SVG на холсте, а затем получить его изображение.

+1

+1

+1

какое-нибудь решение этой проблемы?

@majuansari _SVG_ в _Canvas_ и _Canvas_ в _image_ работает в firefox, но в Chrome есть блокировка безопасности.

Я использовал jQuery для захвата элементов диаграммы и обнаружил, что SVG Highcharts не был должным образом проанализирован, когда это было сделано. Если кто-то передает селектор jQuery диаграммы, он может не содержать SVG.

@mbritton попробуйте http://code.google.com/p/canvg/ (foreignObject не работает)

Да, это было моим решением.

Я решил эту проблему, заменив элементы svg на элементы холста, сгенерированные canvg при захвате.
Вот мой код.

// targetElem is a jquery obj
function take (targetElem) {
    var nodesToRecover = [];
    var nodesToRemove = [];

    var svgElem = targetElem.find('svg');

    svgElem.each(function(index, node) {
        var parentNode = node.parentNode;
        var svg = parentNode.innerHTML;

        var canvas = document.createElement('canvas');

        canvg(canvas, svg);

        nodesToRecover.push({
            parent: parentNode,
            child: node
        });
        parentNode.removeChild(node);

        nodesToRemove.push({
            parent: parentNode,
            child: canvas
        });

        parentNode.appendChild(canvas);
    });

    html2canvas(targetElem, {
        onrendered: function(canvas) {
            var ctx = canvas.getContext('2d');
            ctx.webkitImageSmoothingEnabled = false;
            ctx.mozImageSmoothingEnabled = false;
            ctx.imageSmoothingEnabled = false;

            canvas.toBlob(function(blob) {
                nodesToRemove.forEach(function(pair) {
                    pair.parent.removeChild(pair.child);
                });

                nodesToRecover.forEach(function(pair) {
                    pair.parent.appendChild(pair.child);
                });
                saveAs(blob, 'screenshot_'+ moment().format('YYYYMMDD_HHmmss')+'.png');
            });
        }
    });
}

Просто небольшое примечание:
Я уверен, что canvg работает нормально, но если вы просто хотите преобразовать SVG в холст, вы можете использовать описанный здесь простой метод, который загружает svg в изображение, а затем получает содержимое изображения как dataURL.

var image = new Image();
var xml = '<svg xmlns=....></svg>';
image.src = 'data:image/svg+xml,' + escape(xml); 
document.getElementById('container').appendChild(image);
image.onload = function() {
    image.onload = function() {};
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);
    image.src = canvas.toDataURL();
}

@steren : Хотя это отлично работает в Chrome, есть ли обходной путь для Firefox, который создает NS_ERROR_NOT_AVAILABLE в строке context.drawImage (image, 0, 0) - по-видимому, известная ошибка - или IE 11, где на холсте появляется SecurityError. toDataURL () несмотря на то, что изображение находится в том же домене? Не удалось запустить его в других браузерах, кроме Chrome ...

@gifarangw ваш код отлично работает с highcharts. Спасибо за прекрасный код. : +1: Единственное, что я удалил, это часть canvas.toBlob.

@steren спасибо за ваше решение, оно работает хорошо (протестировано на последних @gifarangw и получил:

    function take(targetElem) {
        // First render all SVGs to canvases
        var elements = targetElem.find('svg').map(function() {
            var svg = $(this);
            var canvas = $('<canvas></canvas>');
            svg.replaceWith(canvas);

            // Get the raw SVG string and curate it
            var content = svg.wrap('<p></p>').parent().html();
            content = content.replace(/xlink:title="hide\/show"/g, "");
            content = encodeURIComponent(content);
            svg.unwrap();

            // Create an image from the svg
            var image = new Image();
            image.src = 'data:image/svg+xml,' + content;
            image.onload = function() {
                canvas[0].width = image.width;
                canvas[0].height = image.height;

                // Render the image to the canvas
                var context = canvas[0].getContext('2d');
                context.drawImage(image, 0, 0);
            };
            return {
                svg: svg,
                canvas: canvas
            };
        });
        targetElem.imagesLoaded(function() {
            // At this point the container has no SVG, it only has HTML and Canvases.
            html2canvas(targetElem[0], {
                onrendered: function(canvas) {
                    // Put the SVGs back in place
                    elements.each(function() {
                        this.canvas.replaceWith(this.svg);
                    });

                    // Do something with the canvas, for example put it at the bottom
                 $(canvas).appendTo('body');
                }
            })
        })
    }

(использует https://github.com/desandro/imagesloaded)

Привет всем, просто хочу сказать, что решение

@Remiremi @fbotti , Почему-то не попадаю в img.onLoad таким образом графики исчезают (не заменяются холстом)

Я работаю с amcharts. Есть идеи?

@guypaskar ваш SVG может нуждаться в дальнейшем курировании. Вы можете добавить $(image).appendTo('body'); в код перед установкой image.onload , тогда в Firefox вы увидите значок недопустимого изображения, вы можете щелкнуть правой кнопкой мыши> просмотреть изображение и увидеть ошибку.

Я быстро попробовал использовать amcharts svg, и мне пришлось добавить свойства xmlns="http://www.w3.org/2000/svg" width="1400" height="500" в тег svg, чтобы он заработал. (Высота и ширина были указаны как свойства css, но по какой-то причине не были подобраны.)

Я нашел простое решение.

Убедитесь, что ваше изображение svg имеет ширину и высоту.

В противном случае недостаточно аргументов, потому что SVG нельзя измерить, как изображение.

Может кто-нибудь резюмировать по этому поводу? Решена исходная проблема? Похоже, что некоторые проблемы с браузером, которые могли вызвать большинство проблем, упомянутых здесь, были исправлены с 2012 года. Согласно некоторым комментариям, использование других библиотек, таких как canvg, также больше не требуется?

Что касается остальных вопросов, будут ли они охвачены № 197 и / или № 267? Можно ли это закрыть?

Это все еще проблема, по крайней мере, с некоторыми браузерами

0.5 добавляет поддержку SVG

Любой превью, когда выйдет 0.5 @niklasvh ?

@IvoPereira Вы можете следить за статусом 0.5 в # 421

@niklasvh У меня версия 0.5, но SVG все еще не отображает. Есть пример, как это сделать? (Это встроенный SVG)

@nikolang вы включили и html2canvas.js и html2canvas.svg.js ? Если да, можете ли вы предоставить jsFiddle или jsbin для демонстрации вашей конкретной проблемы?

У меня это работает. Проблема заключалась в том, что SVG не был полностью отрисован, когда я делал html2canvas.

Но, похоже, проблемы с рендерингом остались. Например http://d3pie.org

Вот как это должно выглядеть:

Вот как это выглядит после html2canvas:

Ого, это довольно жутко. Чтобы это было легче отслеживать, можете ли вы открыть отдельную проблему с теми же снимками экрана и ссылкой только на jsFiddle с демонстрацией? Это слишком далеко от исходной проблемы, которая была давно закрыта. Спасибо, что сообщили об этом!

Я бы с удовольствием это сделал, но я не знаю, как включить новый html2canvas в jsfiddle. Есть ли какая-нибудь внешняя ссылка, которую я могу использовать?

@nikolang Вы можете использовать http://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js .

Благодарю. А SVG-версия?

Аналогично: http://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.svg.js .

Здравствуй,

SVG отображаются на моей стороне, но выглядят черными, как сообщил кто-то ниже. Есть ли способ подсчитать свойство fill элементов svg?

@brainra , я использую что-то вроде этого, чтобы заливка стала белой:

// Create dummy canvas to get a white background
var destinationCanvas = document.createElement("canvas");
destinationCanvas.width = canvas.width;
destinationCanvas.height = canvas.height;

var destCtx = destinationCanvas.getContext('2d');

//create a rectangle with the desired color
destCtx.fillStyle = "#FFFFFF";
destCtx.fillRect(0,0,canvas.width,canvas.height);

//draw the original canvas onto the destination canvas
destCtx.drawImage(canvas, 0, 0);

var img = destinationCanvas.toDataURL("image/png");

Не удалось выполнить «drawImage» в «CanvasRenderingContext2D»: предоставленный элемент HTMLImageElement находится в «сломанном» состоянии ».

Я получаю эту ошибку, когда в HTML есть элемент svg.
Также я установил для allowTaint значение true. Кто-нибудь может мне помочь?

Я думаю, это следует открыть заново - элементы svg правильно отображаются в каждом браузере, кроме Firefox.

NS_ERROR_NOT_AVAILABLE: это ошибка Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=700533 (AFAICT) есть тестовая страница, которая подчеркивает проблему (ссылка на ошибку) http://phrogz.net/ SVG / svg_to_png.xhtml

Мы будем очень благодарны за обходной путь / исправление. Или, может быть, кто-то может ткнуть кого-нибудь в @mozilla, чтобы исправить это :)

Вот ваше решение:
http://stackoverflow.com/questions/18271898/html-and-svg-to-canvas-javascript/32457864#32457864

Я пробовал использовать angular, но в итоге получил испорченный холст. Думаю, мне нужен необработанный SVG?

<img svg-2-canvas-src="/assets/your.svg"/>

angular.module('APP')
    .directive('svg2CanvasSrc', function() {
        return {
            restrict: 'A',
            scope: false,
            link: function($scope, $element, $attrs) {

                var svgSrc = $attrs['svg2CanvasSrc'];

                var image = new Image();

                image.onload = function() {
                    image.onload = function() {};
                    var canvas = document.createElement('canvas');
                    canvas.width = image.width;
                    canvas.height = image.height;
                    var context = canvas.getContext('2d');
                    context.drawImage(image, 0, 0);
                    $element[0].src = canvas.toDataURL();
                };

                image.src = svgSrc;
            }
        };
    });

@remiremi Я использовал ваш код, но результат такой же, svg отсутствует ..
оригинал - https://s29.postimg.org/5lkprhx93/with_SVG.png
результат - https://s23.postimg.org/j1otj2por/without_SVG.png

@remiremi ... какое имя плагина у меня есть при использовании этого скрипта

По сути, установка явной ширины / высоты для SVG непосредственно перед вызовом html2canvas исправляет большинство случаев для меня.
Что я делаю, так это перебираю различные интересующие элементы SVG, получаю вычисленную браузером ширину / высоту с помощью .getBoundingClientRect () и устанавливаю свойство ширины и высоты для элемента, я заметил, что когда у SVG есть процент и аналогичный набор ширины / высоты, это не не рендеринг, но с пикселями, Booyah

По-прежнему возникают проблемы с отображением многострочного диапазона и div

Привет, ребята,
Я решил эту проблему (потерял svg с firefox), немного изменив исходный код.
Во-первых, элемент SVG должен иметь атрибут высоты и ширины, независимо от того, есть ли пиксели или нет.
тогда вы должны изменить исходный код с:
self.image.src = " данные: изображение / svg + xml ," + (новый XMLSerializer ()). serializeToString (узел);
кому:
self.image.src = " данные: изображение / svg + xml ," + encodeURIComponent ((новый XMLSerializer ()). serializeToString (узел));

тогда наслаждайся.

Кто-нибудь знает, как бы я назвал html2canvas для элемента SVG в DOM?

Пример был бы отличным!

+1 все еще проблема для захвата снимка экрана элемента SVG в firefox.

{
  profile: true,
  allowTaint: false,
  onrendered: function() {
    //...done()
  }
}

Привет, я смог решить эту проблему с помощью этого решения (без jQuery):
Решение

пусть targetElem =document.getElementById ('тело');
let nodesToRecover = [];
let nodesToRemove = [];

    let svgElem = targetElem.querySelector('svg')

    let parentNode = svgElem.parentNode;
        // let svg = parentNode.innerHTML;
        let svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" id=\"svg-annotations\" style=\"opacity: 1;\" _ngcontent-c7=\"\">\n\t\t\t<defs><marker id=\"arrow-start\" refY=\"4.5\" markerWidth=\"9.9\" markerHeight=\"9\" orient=\"auto\"><path fill=\"black\" d=\"M 9.9 0 L 9.9 9 L 0 4.5 Z\" /></marker><marker id=\"arrow-end\" refX=\"9.9\" refY=\"4.5\" markerWidth=\"9.9\" markerHeight=\"9\" orient=\"auto\"><path fill=\"black\" d=\"M 0 0 L 0 9 L 9.9 4.5 Z\" /></marker></defs><g class=\"annotation-group\" id=\"measurement-36122\" style=\"opacity: 1;\"><g class=\"annotations\"><g class=\"annotation callout elbow editable \" transform=\"translate(758.541 408.978)\"><g class=\"annotation-connector\"><path class=\"connector\" fill=\"none\" stroke=\"black\" d=\"M 0 0 L 137 137 L 162 137\" /></g><g class=\"annotation-note\" transform=\"translate(162 137)\"><g class=\"annotation-note-content\" transform=\"translate(0 3)\"><rect class=\"annotation-note-bg\" fill=\"white\" fill-opacity=\"0\" x=\"0\" width=\"104.79\" height=\"41.36\" /><text class=\"annotation-note-label\" fill=\"black\" y=\"41.36\" dx=\"0\"><tspan x=\"0\" dy=\"0.8em\" /></text><text class=\"annotation-note-title\" font-weight=\"bold\" fill=\"black\"><tspan x=\"0\" dy=\"0.8em\">Face</tspan><tspan x=\"0\" dy=\"1.2em\">:5453831.5mm²</tspan></text></g><path class=\"note-line\" stroke=\"black\" d=\"M 0 0 L 104.79 0\" /><circle class=\"handle \" cursor=\"move\" fill=\"grey\" fill-opacity=\"0.1\" stroke=\"grey\" stroke-dasharray=\"5\" cx=\"0\" cy=\"0\" r=\"10\" /></g></g></g></g><g class=\"annotation-group\" id=\"measurement-59622\" style=\"opacity: 1;\"><g class=\"annotations\"><g class=\"annotation callout elbow editable \" transform=\"translate(889.656 387.507)\"><g class=\"annotation-connector\"><path class=\"connector\" fill=\"none\" stroke=\"black\" d=\"M 0 0 L 137 137 L 162 137\" /></g><g class=\"annotation-note\" transform=\"translate(162 137)\"><g class=\"annotation-note-content\" transform=\"translate(0 3)\"><rect class=\"annotation-note-bg\" fill=\"white\" fill-opacity=\"0\" x=\"0\" width=\"104.79\" height=\"41.36\" /><text class=\"annotation-note-label\" fill=\"black\" y=\"41.36\" dx=\"0\"><tspan x=\"0\" dy=\"0.8em\" /></text><text class=\"annotation-note-title\" font-weight=\"bold\" fill=\"black\"><tspan x=\"0\" dy=\"0.8em\">Face</tspan><tspan x=\"0\" dy=\"1.2em\">:5453831.5mm²</tspan></text></g><path class=\"note-line\" stroke=\"black\" d=\"M 0 0 L 104.79 0\" /><circle class=\"handle \" cursor=\"move\" fill=\"grey\" fill-opacity=\"0.1\" stroke=\"grey\" stroke-dasharray=\"5\" cx=\"0\" cy=\"0\" r=\"10\" /></g></g></g></g></svg>";

        this.canvas = document.createElement('canvas');
        this.canvas.setAttribute('id', '_canvas');

        canvg(this.canvas, svg, {renderCallback: function(){
            console.log(this);
        }});

        nodesToRecover.push({
            parent: parentNode,
            child: svgElem
        });
        parentNode.removeChild(svgElem);

        nodesToRemove.push({
            parent: parentNode,
            child: this.canvas
        });

        parentNode.appendChild(this.canvas);
        let data = this.canvas.toDataURL('image/png', 0.5);
        console.log(data);

Я делаю это, но получаю только пустое изображение в IE11. Но я могу видеть холст на веб-странице. Может ли кто-нибудь помочь мне, что я здесь делаю не так?

Здравствуйте. У меня проблема с рендерингом svg, когда у него есть тег <image> .

Образец svg

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg>

Пример в jsfiddle http://jsfiddle.net/maestro888/fmjywksq/

Я нашел простое решение.

Убедитесь, что ваше изображение svg имеет ширину и высоту.

В противном случае недостаточно аргументов, потому что SVG нельзя измерить, как изображение.

Это правда, но, к сожалению, не для IE11 ...

Рад, что вы разобрались.
Просто проверил свой JS Fiddle, и он отображает изображение.

С Уважением,

Бернард Т.А. Бейкер

В среду, 27 марта 2019 г., в 16:34 Алессандро Кандини [email protected]
написал:

Я нашел простое решение.

Убедитесь, что ваше изображение svg имеет ширину и высоту.

В противном случае недостаточно аргументов, потому что svg невозможно измерить
как изображение может.

Это правда, но, к сожалению, не для IE11 ...

-
Вы получили это, потому что оставили комментарий.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477242192 ,
или отключить поток
https://github.com/notifications/unsubscribe-auth/AM7ZzLPsl0WJS7gGI9npSsRxR33FCnN9ks5va52bgaJpZM4AD-Sb
.

Я нашел решение с помощью canvg , о переполнении стека здесь сообщается: он отлично работает в IE11!

Мой переработанный фрагмент, удаляющий зависимость от jQuery:

let svgIcons = document.querySelectorAll('.svg-icon');

for (let i = 0; i < svgIcons.length; ++i) {
  let curSvg = svgIcons[i];
  let canvas;
  let xml;

  // Size and color needed for every browser
  curSvg.setAttribute('width', curSvg.parentNode.offsetWidth);
  curSvg.setAttribute('height', curSvg.parentNode.offsetHeight);
  curSvg.setAttribute('style', 'fill: blue');

  canvas = document.createElement('canvas');
  canvas.className = 'screenShotTempCanvas';
  xml = new XMLSerializer().serializeToString(curSvg);
  canvg(canvas, xml);
  curSvg.parentNode.insertBefore(canvas, curSvg.nextSibling);
  curSvg.style.display = 'none';
 }

большой

Вт, 28 марта 2019, 08:49 Алессандро Кандини, [email protected]
написал:

Я нашел решение с помощью canvg https://github.com/canvg/canvg ,
сообщается здесь о переполнении стека
https://stackoverflow.com/questions/34042440/using-html2canvas-to-render-a-highcharts-chart-to-pdf-doesnt-work-on-ie-and-fir :
он отлично работает в IE11!

-
Вы получили это, потому что оставили комментарий.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477503221 ,
или отключить поток
https://github.com/notifications/unsubscribe-auth/AM7ZzKNy1GOgQU9TVv7PGCi4fJvYSxDVks5vbIIOgaJpZM4AD-Sb
.

Привет, @niklasvh Приятно видеть вашу javascript-библиотеку html2canvas, это потрясающая библиотека, но все же я сталкиваюсь с той же проблемой при рендеринге svg в создание холста с использованием npm версии 1.0.0-alpha.12
"а также версия" 1.0.0-rc.1 "также в нашем приложении anguar6. Согласно вашему ответу из списка проблем, проблема возникнет. svg не содержит высоту и ширину, но в моем случае мой Svg имеет 100% высота и ширина, а вложенный div также содержит тег svg и также вложенный существующий холст, я могу экспортировать свою страницу как изображение PNG, но изображение содержит только разбитые значки svg, а существующий холст также не отображается.И еще одна вещь после завершения экспорта моя другая страница svg все отображается как разбитые изображения. для справки я приложил сюда свой снимок экрана, пожалуйста, посмотрите один раз и дайте мне знать, спасибо.
html2canvas (this.screen.nativeElement, {useCORS: true}). then (canvas => {
this.canvas.nativeElement.src = canvas.toDataURL ('image / png');
this.downloadLink.nativeElement.href = canvas.toDataURL ('image / png');
this.downloadLink.nativeElement.download = 'screenshot.png';
this.downloadLink.nativeElement.click ();
});

testpdf (1) .pdf
Здравствуй,
Я вижу ось, но остальная часть диаграммы черная. Любое предложение

Привет, @niklasvh Приятно видеть вашу javascript-библиотеку html2canvas, это потрясающая библиотека, но все же я сталкиваюсь с той же проблемой при рендеринге svg в создание холста с использованием npm версии 1.0.0-alpha.12
"а также версия" 1.0.0-rc.1 "также в нашем приложении anguar6. Согласно вашему ответу из списка проблем, проблема возникнет. svg не содержит высоту и ширину, но в моем случае мой Svg имеет 100% высота и ширина, а вложенный div также содержит тег svg и также вложенный существующий холст, я могу экспортировать свою страницу как изображение PNG, но изображение содержит только разбитые значки svg, а существующий холст также не отображается.И еще одна вещь после завершения экспорта моя другая страница svg все отображается как разбитые изображения. для справки я приложил сюда свой снимок экрана, пожалуйста, посмотрите один раз и дайте мне знать, спасибо.
html2canvas (this.screen.nativeElement, {useCORS: true}). then (canvas => {
this.canvas.nativeElement.src = canvas.toDataURL ('image / png');
this.downloadLink.nativeElement.href = canvas.toDataURL ('image / png');
this.downloadLink.nativeElement.download = 'screenshot.png';
this.downloadLink.nativeElement.click ();
});

та же проблема, Ошибка поиска svg в клонированном документе

Перед использованием html2canvas я временно устанавливаю высоту и ширину SVG. Таким образом, я могу захватить файл svg.

var selectedItem = document.querySelector (". chartWrapper");
var svgElements = selectedItem.querySelectorAll ('svg');
for (let i = 0; i <svgElements.length; i ++) {
selectedItem.getElementsByTagName ("svg") [i] .style.height = document.getElementsByTagName ("svg") [i] .getBoundingClientRect (). height;
selectedItem.getElementsByTagName ("svg") [i] .style.width = document.getElementsByTagName ("svg") [i] .getBoundingClientRect (). width;
}
html2canvas (selectedItem, {backgroundColor: '# 000', allowTaint: true}). then (canvas => {
var myImage = canvas.toDataURL ("изображение / png"). replace ("изображение / png", "изображение / октет-поток");
window.location.href = myImage;
})
for (let i = 0; i <svgCount; i ++) {
selectedItem.getElementsByTagName ("SVG") [я] .style.height = '100%';
selectedItem.getElementsByTagName ("SVG") [я] .style.width = '100%';
}

// use html2canvas in react project when i need a screenshot for the svg
/**
 * svg to canvas
 * <strong i="5">@param</strong> targetElem
 * <strong i="6">@return</strong> {Promise<[]>} // return svg elements
 */
async function svgToCanvas(targetElem) {
  let nodesToRecover = [], nodesToRemove = [], svgElems = targetElem.querySelectorAll('svg');

  for (let i = 0; i < svgElems.length; i++) {
    let node = svgElems[i], parentNode = node.parentNode, svg = parentNode.innerHTML,
      canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
    canvas.setAttribute('data-cover', 'svg');
    const v = await Canvg.from(ctx, svg);
    v.start();
    // record svg elements
    nodesToRecover.push({
      parent: parentNode,
      child: node
    });
    parentNode.removeChild(node);
    //  record canvas elements
    nodesToRemove.push({
      parent: parentNode,
      child: canvas
    });

    parentNode.appendChild(canvas);
  }
  return nodesToRecover;
}

/**
 * recover canvas to svg
 * <strong i="7">@param</strong> targetElem
 * <strong i="8">@param</strong> svgElems // need to recover svg elements
 * <strong i="9">@return</strong> *
 */
function recoverCanvasToSvg(targetElem, svgElems) {
  let canvasElems = targetElem.querySelectorAll("canvas[data-cover='svg']");
  if(!targetElem){
    throw new Error('must have targetElem param')
  }
  if(!isArray(svgElems) && svgElems.length !== canvasElems.length) {
    throw new Error('svgElems must be an Array, and it`s length equal to canvasElems`s length')
  }
  for(let i = 0; i < canvasElems.length; i++){
    let node = canvasElems[i], parentNode = node.parentNode;
    parentNode.removeChild(node);
    parentNode.appendChild(svgElems[i]?.child);
  }
}