unable to print fill color SVG

Question

I am trying to print an svg but the fill color is not being applied. Is there a way to do this?

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

The reason the color is missing from the SVG is because you're opening a new window and only writing the element to said window not the CSS stylings. You will need to copy the CSS to the new window as well. There's multiple methods on how to do so. Some are simpler than others.

If you simply want all style elements copied over you can do as follows (there's a lot of cases where this wont work):

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();

Another option is to go through all elements and copy their computed CSS values. I would recommend you to take a look at Get a CSS value with JavaScript as to how to actually do this. Below I've written an example of how to clone an element and its computed CSS values. I've only tested this with your example. Therefore, I can't guarantee that it will work everywhere, but it might be good to start from.

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"));