Javascript 将带有样式的SVG转换为PDF_Javascript_Styles_Css To Pdf

Javascript 将带有样式的SVG转换为PDF

javascript

Javascript 将带有样式的SVG转换为PDF,javascript,styles,css-to-pdf,Javascript,Styles,Css To Pdf,将SVG转换为PDF时难以保留样式。我正在使用来自的cssToPdf 但我需要使用样式混合模式：乘法；但是当我创建pdf时，它没有被保留我尝试在svg元素上使用内联样式，也尝试将样式放入HTML头部，并使用外部style.css文件。但在每种情况下，我都没有得到“相互影响” 如何让pdf生成识别SVG元素的样式 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset=

将SVG转换为PDF时难以保留样式。我正在使用来自的cssToPdf

但我需要使用样式混合模式：乘法；但是当我创建pdf时，它没有被保留

我尝试在svg元素上使用内联样式，也尝试将样式放入HTML头部，并使用外部style.css文件。但在每种情况下，我都没有得到“相互影响”

如何让pdf生成识别SVG元素的样式

<!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>

这方面有一个有效的例子

回购协议正在生效

如果您有任何帮助，我们将不胜感激

谢谢，

我将添加此作为答案，因为我是此应用程序的作者之一

@cloudformatter css2pdf应用程序基于RenderX的XEP引擎。他们对SVG转换的支持详细说明如下：

如果您想要的不在该列表中，则当前不支持该列表

本质上，@cloudformatter获取包含SVG的HTML+CSS（如果有）并发送到远程服务器。该服务器执行一些清理，并将内容转换为XSL FO，以用于格式化引擎。使用的格式化引擎是RenderX XEP。因此，它正在执行从内容到输出（PDF、Postscript、AFP、XPS、其他）的所有格式设置。基础引擎所支持的就是所支持的

在您的情况下，似乎不支持混合模式。

PDF中的SVG非常有用。如果你做得对，结果是好的，但是我承认我不熟悉你提到的转换软件。如果您对我使用的内容感兴趣，我会使用它。Cairo是否保留SVG样式？ThanksSeems Cairo生成pdf原语，但不会将svg元素转换为pdf或eps。Cairo至少会在我的应用程序中保留样式。@cloudformatter css2pdf应用程序基于RenderX的XEP引擎。下面详细介绍了他们对SVG转换的支持：。如果你想要的不在列表中，那么它将不被支持。谢谢你的回答，我很高兴收到一位作者的回答。这是一个很好的应用程序，但不幸的是，它目前似乎不能满足我的需要。非常感谢向库中添加混合模式功能需要什么？这会非常困难吗？我的意思是让我自己去做。是否有一个巨大的ab=mount来学习理解这个应用程序。大部分代码都在服务器上，对吗？

circle {
  mix-blend-mode: multiply;
}