作为数据URI加载的SVG没有渲染<image>标签

SVG loaded as data URI doesn't render <image> tags

本文关键字：image 标签 URI 数据 加载 SVG      更新时间：2023-09-26

对于基本的

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60">
    <circle cx="30" cy="30" r="30" />
    <image x="0" y="0" width="60" height="60" xlink:href="//cloudfront.net/mysite/pages/1234/attachments/original/1234567890/MyIcon.svg?123456789" />
</svg>

当我将其内联或作为外部资源加载时，它将按预期呈现圆圈和图像。但是，我采用完全相同的SVG，并使用数据URI将其渲染为<img>，圆圈将加载，但不加载SVG <image>:

var img = document.createElement('img');
// Grab our SVG element
var svg = document.querySelector('svg');
// Load its contents as a data URI
img.src = 'data:image/svg+xml;uft8,' + svg.outerHTML;
// Put this image on the bottom
document.body.appendChild(img);

这很奇怪，因为它必须是完全相同的内容。我认为这可能是CORS问题，但我在控制台中没有看到任何错误或警告。

jsfiddle: http://jsfiddle.net/jkoudys/x4uhch7a/7/

当SVG被用作图像时(在这种情况下通过<img>标签)，它必须在单个文件中完成，以保护用户隐私。

否则，托管在一个站点上的SVG图像可能会向另一个站点发送消息，表明它已被查看，而光栅图像则不能。您对图像功能的心理模型不应该取决于它是SVG图像还是光栅图像。

因此，在将SVG文件转换为数据URI之前，需要将嵌入的图像本身转换为数据URI。

相关文章：