将 <svg><image> 移动到 blob 图片中答案

【问题标题】：Moving an <svg><image> into a blob picture将 <svg><image> 移动到 blob 图片中
【发布时间】：2014-04-27 04:44:14
【问题描述】：

此问题适用于具有 SVG 扩展知识的高级 Web 开发人员。我正在做一个需要移动 SVG 图像的项目进入 BITARRAY 链接和 IMG SRC。

到目前为止，我已经成功地使用常规的 svg 形状（矩形、路径...）做到了这一点，但是当 im
尝试对 IMAGE 标记执行相同操作时，图片将折叠为空图像。
我已经使用了这个过程的MDN方法，你可以在这个链接中看到方法Drawing DOM objects into a canvas

注意事项：
* 我已成功将图像本身加载到 svg 图像元素中
* 图片标记

<svg version="1.1" width="19" height="19" preserveaspectratio="none">
<image x="0" y="0" width="18.867924528301888" height="18.867924528301888" id="box_2_rect" fill="#000" href="http://someUrl/a809e372db0b6d2dfaa09b3039205ab6.jpg"/>
</svg>

我对此很头疼，但网络上的信息非常稀缺。只是有人请解释为什么 IMAGE 标签会阻止一切！！！！

【问题讨论】：

SVG <image> 标签中的 href 属性属于 xlink 命名空间，而不是 SVG 命名空间。你应该先纠正它。
我做了你现在写的，图像没有刹车它显示所有形状，但图像元素不会显示
引用您的教程链接：“SVG 图像不允许加载任何外部资源，例如，即使是看似来自同一域的资源。光栅图像（如 JPEG 图像）等资源) 或必须作为 data: URI 内联。”因此，您必须先将图像转换为 dataurl，然后才能将其插入画布。

标签： javascript image svg aspect-ratio

【解决方案1】：

我正在用我找到的答案更新这个帖子。基本上，当使用外来对象标签时，其所有内容都必须是无源的，这意味着不引用您或其他服务器上的文件。异物的内容物必须是无源的。这意味着您不能在异物标签内显示图像。我不确定 svg 标签的内容。但是画布可以做到这一点，如果您尝试将 html 复制到画布，您可以使用我共享的链接中描述的技术来做到这一点，并且当您的画布准备好 html 时，您可以将图像加载到其中并将它们放在画布在正确的地方。这是你需要做的一些编程。

【讨论】：