将计算的SVG作为数据URI传递给SRC属性

Passing computed SVG as a data URI to a SRC attribute

本文关键字：SRC 属性 URI 数据 计算 SVG      更新时间：2023-09-26

我在互联网上四处寻找，但一直找不到答案。

我正在构建另一个自定义图像滑块，但需要能够处理正在设置动画的div中的任意html。

一般来说，这不会有问题。。。这当然不是我创建的第一个滑块，一般来说，如果我需要漂亮的切片和骰子效果，我会像其他人一样使用一个空的div作为背景图像。如果我必须允许它处理任意的html，我会限制效果，或者在slice-ndice转换完成后简单地淡出html内容。

然而，在这种情况下，我需要在相同的滑块中同时使用漂亮的效果和任意的HTML。

关于如何做到这一点，我最好的想法是将任意的HTML转换为图像。

我在任何地方都找不到一个像样的客户端解决方案。。。但最终我意识到我可以将HTML填充到SVG元素中，并可以使用SVG作为div的背景图像

（仅供参考，这实际上只需要由现代浏览器来处理，它们可以处理SVG和DATA-URLS等）

第一部分其实有点简单：

arbitraryHTML = "<style>div{padding:10px;border:5px solid red;border-radius:10px;width:500px;height:175px}p{text-align:justify;}img{height:50px;float:left;border-radius:5px;margin:10px;}</style><body><div><img src='steve.png'><h1>Arbitrary HTML</h1><p>This allows arbitrary HTML to be turned into an image, and the image is then able to be stuffed into a canvas.  In this case, I will leave this image as an image so that I can set it as a background image of a div that will be visually sliced apart for a slider.</div></body>";
var stuff = document.createElement('svg');
stuff.innerHTML = "<foreignObject>"+arbitraryHTML+"</foreignObject>";
document.body.appendChild(stuff);

如果我只是想直接将它填充到DOM中，这非常好。。。但我需要做的是将它用作我正在切片的div的背景图像。

由于我已经有了SVG代码，我应该能够将其用作数据uri来在.中馈送图像

我在fiddle上找到了一个这样的例子，并试图在上面的代码示例中使用这种方法将svg填充到背景图像中。。。到目前为止，我完全没有做到这一点

示例：

var i = document.createElement('div');
i.setAttribute("style","background-image:url('data:image/svg+xml,<svg>"+stuff.innerHTML+"</svg>);'");
document.body.appendChild(i);

每次，我都会遇到同样的问题；Chrome控制台没有抛出任何错误或警告，但div只是显示为完全空。

控制台使用一些方法（例如上面的代码示例）在div的代码中正确显示数据uri，但仍然无法显示背景。

作为bug测试的一部分，我将两者并列。。。实际的svg元素（显示得很好），以及带有相同代码的div作为背景图像（不会显示）。因此，我假设我的问题是将svg转换为数据url的方式，而不是svg本身。

在此之前，我真的没有玩过太多内联SVG或数据URL。。。因此，很有可能我在使用数据URL或SVG时处理不当。

不太确定我做错了什么，但我真的很想解决这个问题。

有没有更好的方法将任意HTML转换为我错过的图像？

还是我的想法是如何在正确的轨道上实现这一点，但实施却搞砸了？

如有任何帮助，我们将不胜感激。

我想Chrome仍然有这个webkit错误。你所做的应该在Firefox或Opera 12中工作。请注意，IE9/10根本不支持foreignObject，不确定是否支持11。

相关文章：