将带有样式的 SVG 转换为 PDF
Converting SVG with styles to PDF
将 SVG 转换为 PDF 时难以保留样式。
我正在使用来自 cloudFormatter.com.
的 cssToPdf
但是我需要使用样式 mix-blend-mode: multiply;但是当我创建 pdf 时它没有被保留。
我尝试在 svg 元素上使用内联样式,也尝试将样式放入 HTML 头部并使用外部 style.css 文件。但是在每种情况下我都没有得到 'mutliply effect'.
如何让 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>
xepOnline.jqPlugin.js 文件太大,无法包含在此处。但是可以在 http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xepOnline.jqPlugin.js or downloaded from cloudformatter.com
找到
style.css 文件,
circle {
mix-blend-mode: multiply;
}
上有一个这样的工作示例
回购位于 https://github.com/shanegibney/csstopdf
如有任何帮助,我们将不胜感激,
谢谢,
我会将此添加为答案,因为我是此应用程序的作者之一。
@cloudformatter css2pdf 应用程序基于 RenderX 的 XEP 引擎。他们对 SVG 转换的支持在此处详述:
如果您想要的不在该列表中,那么目前不支持它。
本质上,@cloudformatter 将您的 HTML+CSS 与包含的 SVG(如果有)一起发送到远程服务器。该服务器进行一些清理并将内容转换为用于格式化引擎的 XSL FO。使用的格式化引擎是 RenderX XEP。因此,它正在执行从内容到输出(PDF、Postscript、AFP、XPS 等)的所有格式设置。底层引擎支持的就是支持的。
在您的情况下,似乎不支持 mix-blend-mode。
将 SVG 转换为 PDF 时难以保留样式。 我正在使用来自 cloudFormatter.com.
的 cssToPdf但是我需要使用样式 mix-blend-mode: multiply;但是当我创建 pdf 时它没有被保留。
我尝试在 svg 元素上使用内联样式,也尝试将样式放入 HTML 头部并使用外部 style.css 文件。但是在每种情况下我都没有得到 'mutliply effect'.
如何让 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>
xepOnline.jqPlugin.js 文件太大,无法包含在此处。但是可以在 http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xepOnline.jqPlugin.js or downloaded from cloudformatter.com
找到style.css 文件,
circle {
mix-blend-mode: multiply;
}
上有一个这样的工作示例
回购位于 https://github.com/shanegibney/csstopdf
如有任何帮助,我们将不胜感激,
谢谢,
我会将此添加为答案,因为我是此应用程序的作者之一。
@cloudformatter css2pdf 应用程序基于 RenderX 的 XEP 引擎。他们对 SVG 转换的支持在此处详述:
如果您想要的不在该列表中,那么目前不支持它。
本质上,@cloudformatter 将您的 HTML+CSS 与包含的 SVG(如果有)一起发送到远程服务器。该服务器进行一些清理并将内容转换为用于格式化引擎的 XSL FO。使用的格式化引擎是 RenderX XEP。因此,它正在执行从内容到输出(PDF、Postscript、AFP、XPS 等)的所有格式设置。底层引擎支持的就是支持的。
在您的情况下,似乎不支持 mix-blend-mode。