使用对 Canvas 的外部引用来渲染 SVG

Posted 2023-03-05

【中文标题】使用对 Canvas 的外部引用来渲染 SVG

【英文标题】：Render SVG with external references to Canvas

【发布时间】：2015-08-04 15:16:03

【问题描述】：

我正在尝试使用data: URI 和canvas.drawImage() 将SVG 渲染到画布上。这很好用，只是 SVG 中的外部图像不包含在生成的画布上。

示例 html (live jsFiddle example)：

<canvas id="canvas"  ></canvas>
<div id="container">
    <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect   fill="rgb(0, 255, 0)" stroke- stroke="rgb(0, 0, 0)"/>
      <image preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://upload.wikimedia.org/wikipedia/en/7/70/Example.png"  ></image>
    </svg>
</div>

javascript：

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    svg = document.getElementById('container').innerHTML,
    img = new Image();

img.onload = function () 
    ctx.drawImage(img, 0, 0);
;
img.src = 'data:image/svg+xml,' + svg;

我尝试在调用 drawImage 之前设置一个超时，希望这是一个同步问题，但它似乎没有帮助。有什么想法吗？

【问题讨论】：

只有一个。不要使用它们不起作用的外部图像。您需要将外部图像转换为数据 URI

见***.com/questions/29975138/…

【参考方案1】：

这不是画布问题。即使您根本不使用画布并且只是将 HTMLImageElement 附加到 DOM，它也不会工作/看起来相同。见：

    var svg = document.getElementById('container').innerHTML,
    img = new Image();

img.onload = function () 
    document.body.appendChild(img); // img does not contain Wikipedia image
;
img.src = 'data:image/svg+xml,' + svg;

http://jsfiddle.net/ss5bjooj/2/