使用Batik将SVG转PDF后，浏览器中图案填充异常问题

我用Batik将包含内部<pattern>矢量填充图案的SVG转换为PDF，在Acrobat中查看时显示正常，但在Chrome这类网页浏览器中查看时，图案填充仅部分渲染，滚动PDF文档时还会出现图案跳动的情况。

将同一份SVG导入Inkscape再导出PDF则无此问题，推测该异常与Batik相关。

复现用示例SVG #

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="400">
  <defs>
<pattern id="dots" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
  <circle cx="5" cy="5" r="2" fill="black" />
</pattern>

<pattern id="gravel" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse" >
  
  <path
 style="fill:none;stroke:#000000"
 d="M 1,2 3,1 5,4 2,5 Z"
 id="path101" />
 
  <path
 style="fill:none;stroke:#000000"
 d="M 4,7 8,5 9,8 7,9 5,9 Z"
 id="path102" />     
 
 </pattern>


</defs>
  
  
<rect x="20" y="20" width="70" height="350" fill="url(#dots)" stroke="black" stroke-width="1" />
   
    <rect x="100" y="20" width="70" height="350" fill="url(#gravel)" stroke="black" stroke-width="1" />
  
  
</svg>

异常表现 #

Chrome中查看生成的PDF时，两个矩形的图案填充出现缺失（原本应铺满的点状、碎石状图案仅部分显示），滚动文档时图案还会出现跳动现象。

内容的提问来源于stack exchange，提问作者Ben Wood