Converting SVG with styles to PDF

Having difficulty preserving style when converting an SVG to PDF. I am using cssToPdf from cloudFormatter.com.

But I need to use the style mix-blend-mode: multiply; but it is not preserved when I create the pdf.

I have tried using the style inline on the svg elements, also by putting style into the HTML head and by using an external style.css file. But in each case I do not get the 'mutliply effect'.

How do I get the pdf generation to recognise the SVG element's style?

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>csstopdf</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- <style>
      circle {
        mix-blend-mode: multiply;
      }
    </style> -->
  </head>
  <body>
    <div>
      <svg id="svgCircles" version="1.1" xmlns="http://www.w3.org/2000/svg" width="300" height="300" x="0" y="0" viewBox="0 0 150 150">
        <!-- <circle cx="50" cy="50" r="40" stroke-width="4" fill="green" style="mix-blend-mode: multiply;"/>
        <circle cx="75" cy="75" r="40" stroke-width="4" fill="red" style="mix-blend-mode: multiply;"/>
        <circle cx="100" cy="50" r="40" stroke-width="4" fill="blue" style="mix-blend-mode: multiply;"/> -->
        <circle cx="50" cy="50" r="40" stroke-width="4" fill="green" />
        <circle cx="75" cy="75" r="40" stroke-width="4" fill="red" />
        <circle cx="100" cy="50" r="40" stroke-width="4" fill="blue" />
      </svg>
    </div>
    <div class="btn-group" onclick="xepOnline.Formatter.Format('svgCircles');" role="group" aria-label="...">
      <button type="button" class="btn btn-warning">Generate svgCircles!</button>
    </div>
     <script src="xepOnline.jqPlugin.js"></script>
  </body>
</html>

The xepOnline.jqPlugin.js file is too large to include here. But it can be found at http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xepOnline.jqPlugin.js or downloaded from cloudformatter.com

The style.css file,

circle {
  mix-blend-mode: multiply;
}

There is a working example of this on gh-pages

The repo is at https://github.com/shanegibney/csstopdf

Any help with this would be greatly appreciated,

Thanks,

Solution

I will add this as an answer because I am one of the authors of this application.

The @cloudformatter css2pdf application is based on top of RenderX's XEP engine. Their support for conversion of SVG is detailed here:

RenderX's SVG Support

If what you desire is not in that list then it is not currently supported.

Essentially, @cloudformatter takes your HTML+CSS with included SVGs if any and sends to a remote server. That server does some cleanup and converts the content to XSL FO for a formatting engine. The formatting engine used is RenderX XEP. So it is doing all the formatting from content to output (PDF, Postscript, AFP, XPS, other). What that underlying engine supports is what is supported.

In your case, it looks like mix-blend-mode is not supported.