SVG图像和图案在画布上绘制或用作图像源时丢失

Question

我使用SVG将滤镜和图案应用于图像（需要用于打印）。我的问题是，当我将svg绘制到画布上以将其保存为jpeg时，链接的图像和图案不会显示在画布上。

从我观察到的结果来看，如果将图像URL转换为base64（用于“嵌入”到SVG），图像将显示在画布上，但是我无法对fill属性（{{ 1}}）。

我想知道，是否有一种方法可以在将svg加载到画布之前对其进行“栅格化”，或者如何获得链接属性以显示在画布上？

svg在浏览器中的外观如下：

fill="url(#dots)"

我的将svg保存到文件的代码：

<svg viewBox="0 0 340 415" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid slice">
  <defs>
    <pattern id="dots" x="0" y="0" width="1" height="1">
    <image xlink:href="/data/img/patterns/dots.jpg"  x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
</pattern>
  </defs>

  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"></rect>
  <image xlink:href="blob:http://localhost:8081/a80eac2b-722b-4596-99b1-38d2646761f6" id="image" x="4mm" y="4mm" width="82mm" height="82mm" preserveAspectRatio="xMidYMid slice" filter="url(#walden)"></image>
  <text id="note" x="4.5cm" y="10.2cm" text-anchor="middle" font-size="30px" font-family="Pacifico"><!---->Hello World!<!----></text>
</svg>

结果（顶部：svg，底部：画布渲染）

Answer 1

针对同一问题，我发现的唯一解决方案是以base64编码方式将svg中的模式包括在内：

<pattern  id="pat01" xlink:href="data:image/png;base64,iVBOR...CC " style="opacity:1;stop-opacity:1" /></pattern>
...
<circle cx="23" cy="153" r="18" style="opacity:1;fill:url(#pat01);fill-opacity:1;stop-opacity:1;stroke:#000000;stroke-miterlimit: 10;"></circle>