在 Chrome 中将 SVG 渲染为画布模式答案

【问题标题】：Rendering of SVG as canvas pattern in Chrome在 Chrome 中将 SVG 渲染为画布模式
【发布时间】：2013-04-30 08:29:08
【问题描述】：

就是这样，我使用 SVG 图像来创建图案。该模式显示在大多数浏览器中。但是 Chrome 不显示该模式。如果我将 png 图像作为新 Image() 对象的来源，Chrome 会显示它。我试图找出这是否正常，但在网上找不到任何相关信息。我做错了什么还是已知问题？

【问题讨论】：

stackoverflow.com/questions/16337993/…
谢谢 Rob，但您转发给我的主题似乎适用于安全问题。但我使用的 svg 文件是本地的...
Chrome 将file:// 视为非同源。把它放在本地主机或其他服务器上。
仍然无法正常工作。 js和图像文件在同一台服务器上。我直接这样称呼它： imageObj.src= "img/ceca_to_ue_graph/hatcheuro.svg";我应该把它称为绝对链接吗？
我的问题与画布有关。当我使用本地 svg 文件的图像（无论文件夹是本地的还是托管在服务器上，我都测试过）作为画布元素中的模式时。该图案不会在 Chrome 中显示。有没有人遇到过这样的问题？我的代码：> var imageObj = new Image(); imageObj.onload = function() { var pattern = context.createPattern(imageObj, 'repeat'); drawGraph(firstYear, lastYear, totalRadius, 模式); } imageObj.src= "img/ceca_to_ue_graph/hatcheuro.svg";

标签： image google-chrome design-patterns canvas svg

【解决方案1】：

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

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

【讨论】：