SVG中CSS变换样式在FOP生成PDF中失效,是否为FOP专属限制?
SVG CSS变换在FOP导出PDF时失效的原因
这确实主要是FOP的功能限制,但也得结合SVG规范支持情况来看:
- FOP对SVG的支持基于较早的SVG标准,对CSS
transform属性的兼容度极低——不管是通过内联style属性、类选择器定义的变换,还是结合CSS变量实现的动态变换,FOP基本都无法解析。 - FOP仅能较好支持SVG原生的
transform属性(也就是直接写在元素标签上的transform,比如<line transform="translate(100px)" ...>),而非CSS样式层级的transform规则。 - 其他PDF生成工具(比如Apache Batik的SVG转PDF工具、Chrome无头模式导出PDF)对CSS Transform的支持更完整,但也不是所有CSS变换特性都能100%兼容,具体要看工具对SVG/CSS规范的覆盖程度。
- 如果要让你的SVG在FOP中正常显示变换效果,建议把CSS形式的
transform全部转换成SVG元素的原生transform属性,同时移除CSS变量,直接使用具体数值。
举个例子,你原来的代码里:
<line x1="0" x2="100" y1="100" y2="100" class="translate"/>
可以改成:
<line x1="0" x2="100" y1="100" y2="100" transform="translate(100px)" style="stroke:green;"/>
内容的提问来源于stack exchange,提问作者Florimond
相关产品推荐
相关产品推荐

