Image 在Chrome中以画布模式呈现SVG

就是这样，我使用SVG图像来创建一个模式。这种模式在大多数浏览器中都会显示。但是，Chrome不显示该图案。 如果我将一个png图像作为我的新image（）对象的源，Chrome会显示它。 我想知道这是否正常，但在网上找不到关于in的任何信息。

---

我是做错了什么，还是这是一个已知的问题？

我在Chrome中找到的解决相同问题的唯一方法是将svg中的模式包含在base64编码中：

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

...

---

当您将其序列化并在画布中绘制时，模式会正确显示。

谢谢Rob，但您转发给我的主题似乎适用于安全问题。但是我使用的svg文件是本地的……Chrome将

文件：//

视为非同一来源。将它放在本地主机或其他服务器上。仍然不工作。js和图像文件位于同一服务器上。我直接这样称呼它：imageObj.src=“img/ceca_to_ue_graph/hatchuro.svg”；我应该称之为绝对链接吗？我的问题与画布有关。当我使用一个本地svg文件（无论文件夹是本地的还是托管在服务器上的，我都测试过）作为画布元素中的模式时。该图案将不会显示在Chrome中。有没有人遇到过这样的问题？我的代码：>var-imageObj=newimage（）；imageObj.onload=function（）{var pattern=context.createPattern（imageObj，'repeat'）；drawGraph（firstYear，lastYear，totalRadius，pattern）}imageObj.src=“img/ceca_to_ue__graph/hatchuro.svg”；