浏览了互联网，并没有找到答案。
我正在构建另一个自定义图像滑块，但需要能够处理正在动画的 div 中的任意 html。
一般来说，这没问题......这肯定不是我创建的第一个滑块，而且，一般来说，如果我需要漂亮的切片和骰子效果，我会像每个人一样使用内容作为背景图像的空 div别的。如果我必须允许它处理任意 html，我会限制效果，或者在完成 slice-n-dice 转换后简单地淡入 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，但仍然无法显示背景。
作为错误测试的一部分，我将两者并排放置......实际的 svg 元素（显示良好），以及具有相同代码的 div 作为背景图像（不会显示）。因此，我假设我的问题在于我将 svg 转换为 data-url 而不是 svg 本身的方式。
在此之前，我真的没有玩过内联 SVG 或数据 URL……所以很可能我正在以不正确的方式处理数据 URL 或 SVG，因为我尝试使用它们的方式。
不太确定我做错了什么，但真的很想解决这个问题。
有没有更好的方法将任意 HTML 转换为我错过的图像？
或者我的想法是如何在正确的轨道上实现这一目标，但实施搞砸了？
任何帮助将不胜感激。