Question

基本

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

Answer 1

当SVG用作图像（在这种情况下通过<img>标记）时，必须在单个文件中完成，以保护用户隐私。这是documented here

否则，站点上托管的SVG图像可能会向另一个站点发送消息，指示在光栅图像无法查看时已将其查看。你的图像可以做的心理模型不应该取决于它是SVG图像还是光栅图像。

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

作为数据URI加载的SVG不会呈现<img/>标记

1 个答案: