CSS not applied to SVGs

See this demo for an illustrated example.

When inline SVGs are styled using CSS the properties are not rendered.

My example above shows how an SVG that includes a defined fill property as:

<path fill="red" ...

But is then overridden in the browser using the CSS:

path {
    fill: green;
}

will render in the browser as a green path but once converted to a canvas using html2canvas the property is lost and is instead rendered as red.

[PawelBaranowski]

@Jerther you saved my day, thanks a lot! I confirm this works, here’s a Typescript version if anyone needs it:

function applyStyleToSvg(container: Element | Document) {
    for (let svg of Array.from(container.getElementsByTagName('svg'))) {
        for (let element of Array.from(svg.getElementsByTagName('*')) as Array<SVGElement>) {
            const computedStyle = getComputedStyle(element);
            for (let property of Array.from(computedStyle)) {
                element.style.setProperty(property, computedStyle.getPropertyValue(property));
            }
        }
    }
}

[Jerther]

Here’s a version of the fix that does not rely on external libraries:

function applyStyleToSvgTrees(container) {
  for (let svg of container.getElementsByTagName('svg')) {
    for (let el of svg.getElementsByTagName('*')) {
      s = getComputedStyle(el);
      for (let key of s) {
        let prop = key.replace(/\-([a-z])/g, v => v[1].toUpperCase());
        el.style[prop] = s[key];
      }
    }
  }
}


html2canvas(document.body, {
  onclone: (clonedDoc) => {
    applyStyleToSvgTrees(clonedDoc);
  },
}).then(canvas => {
  document.body.appendChild(canvas);
});

Try here with jsFiddle