невозможно распечатать <path>цвет заливки SVG

Question

Я пытаюсь напечатать svg, но цвет заливки не применяется.Есть ли способ сделать это?

const winPrint = window.open('', '', 'width=900,height=650');
let el = document.getElementsByClassName('testing')[0]
winPrint.document.write(el.innerHTML);

// winPrint.document.write(this.globalMap.nativeElement.innerHTML);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();

html, body, svg {
  height: 100%
}

path {
  fill: orange;
  background-color: orange;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path -->
<div class="testing">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z"/>
</svg>
</div>

Answer 1

Причина, по которой цвет отсутствует в SVG, заключается в том, что вы открываете новое окно и записываете элемент только в это окно, а не в стили CSS.Вам также нужно будет скопировать CSS в новое окно.Есть несколько методов, как это сделать.Некоторые из них проще, чем другие.

Если вы просто хотите, чтобы все элементы стиля были скопированы поверх, вы можете сделать следующее (во многих случаях это не работает):

const winPrint = window.open('', '', 'width=900,height=650');
let el = document.getElementsByClassName('testing')[0];
winPrint.document.write(Array.from(document.querySelectorAll("style")).map(x => x.outerHTML).join("") + el.innerHTML);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();

Другой вариант -просмотреть все элементы и скопировать их вычисленные значения CSS.Я бы порекомендовал вам взглянуть на Получить значение CSS с помощью JavaScript , чтобы узнать, как на самом деле это сделать.Ниже я написал пример того, как клонировать элемент и его вычисленные значения CSS.Я проверял это только на вашем примере.Поэтому я не могу гарантировать, что это будет работать везде, но было бы неплохо начать с.

function cloneElement(el) {
  const clone = el.cloneNode(true);
  copyCSS(el, clone);

  return clone;
}

function copyCSS(source, dest) {
  const computedStyle = window.getComputedStyle(source);
  const cssProperties = Object.keys(computedStyle);
  for (const cssProperty of cssProperties) {
    dest.style[cssProperty] = computedStyle[cssProperty];
  }

  for (let i = 0; i < source.children.length; i++) {
    copyCSS(source.children[i], dest.children[i]);
  }
}

function printElement(el) {
  const clone = cloneElement(el);

  const winPrint = window.open('', '', 'width=900,height=650');
  winPrint.document.write(clone.outerHTML);
  winPrint.document.close();
  winPrint.focus();
  winPrint.print();
  winPrint.close();
}

printElement(document.querySelector(".testing"));