Получить динамически созданный элемент SVG

Question

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

<div style="float: right;" class="printnoshow">
    <input type="button" class="formbutton" value="Copy" onclick="copyImg(); $('.formsmodalmask').hide(); $('.pmonitormodal').hide(); $('.pmonitordescriptiondiv').css('page-break-after', 'auto');" />
</div>

При нажатии функция JavaScript copyImg () предназначена для извлечения SVG. У меня есть план ниже, но я не уверен, где это будет go.

function copyImg() {
    var svg = document.getElementById('svg');
    console.log(svg);

    var range = document.createRange();
    range.selectNodeContents(svg);

    window.getSelection().addRange(range);

    var success = document.execCommand('copy');
    if (success)
        console.log('Successfully copied to clipboard');
    else
        console.log('Unable to copy to clipboard');

    window.getSelection().removeRange(range);
}

Таким образом, SVG - это диаграмма ниже, и вы также можете увидеть кнопку Копировать на форме. Любая помощь здесь будет оценена. Спасибо ] 1

Answer 1

Первый ответ на 100% правильный, но он скопирует svg как необработанный текст в буфер обмена. Если вы ищете решение, где вы действительно сохраните SVG как изображение. Вам необходимо использовать html2canvas.min. js в качестве внешнего источника sr c. Например:

<script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-rc.3/html2canvas.min.js"></script>

И сценарий:

svg = document.querySelector('svg');
svg.onclick = () => {
html2canvas(svg).then(function(canvas) {
                canvas.toBlob(function(blob) {
                        navigator.clipboard
                                .write([
                                new ClipboardItem(
                                        Object.defineProperty({}, blob.type, {
                                                value: blob,
                                                enumerable: true
                                        })
                                )
                        ])
                });
        });
}

Это скопирует SVG как изображение, чтобы вы могли вставить его везде. После этого вы можете вставить его в MS Word et c. И, конечно, вы можете превратить его в функцию для использования кода, если у вас есть некоторые асин c вещи (после создания svg). PS: Может быть, вам нужно отредактировать селектор css

Answer 2

Первая строка показывает console.log (svg), а остальная часть - console.dir (svg), которая показывает все показанные свойства и многие другие ниже. те.

Answer 3

По моему мнению, самый простой способ получить разметку динамически создаваемого svg - это прочитать его атрибут outerHTML. Это дает вам строку, которую вы можете легко скопировать в буфер обмена.

Следующий фрагмент иллюстрирует способ сделать это (щелчок по svg копирует свою разметку в буфер обмена):

const svg = document.getElementById('svg');

svg.onclick = () => window.navigator.clipboard.writeText(svg.outerHTML);

svg {
  background: lightgrey;
}

<svg id="svg" width="100" height="100" viewBox="0 0 100 100">
  <rect x="0" y="0" width="10" height="10" />
  <rect x="90" y="90" width="10" height="10" />
</svg>