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

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

javascript svg

Javascript 将计算出的SVG作为数据URI传递给SRC属性,javascript,svg,data-url,Javascript,Svg,Data Url,我已经在互联网上四处寻找，但没有找到答案我正在构建另一个自定义图像滑块，但需要能够处理正在设置动画的div中的任意html 一般来说，这不会有问题。。。这当然不是我创建的第一个滑块，一般来说，如果我需要漂亮的切片和骰子效果，我会像其他人一样使用一个空div作为背景图像。如果我必须允许它处理任意的html，我会限制效果，或者在slice-n-dice转换完成后，简单地淡入html内容然而，在这种情况下，我需要在相同的滑块中同时使用漂亮的效果和任意的HTML 我最好的办法是将任意HTML转换成图

我已经在互联网上四处寻找，但没有找到答案

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

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

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

我最好的办法是将任意HTML转换成图像

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

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

第一部分其实很简单：

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);

arbiryhtml=“div{padding:10px；边框：5px纯红；边框半径：10px；宽度：500px；高度：175px}p{text align:justify；}img{height:50px；float:left；边框半径：5px；边距：10px；}任意HTML这允许将任意HTML转换为图像，然后可以将图像填充到画布中。在这种情况下，我将此图像保留为图像，以便将其设置为div的背景图像，该图像将被视觉分割为滑块。“；
var stuff=document.createElement（'svg'）；
stuff.innerHTML=“”+任意HTML+”；
文件.正文.附件（文件）；

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

因为我已经有了SVG代码，所以我应该能够将它用作数据uri来输入图像

并尝试在上面的代码示例中使用此方法将svg填充到背景图像中……到目前为止，我完全没有做到这一点

例如：

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

var i=document.createElement（'div'）；
i、 setAttribute（“样式”，“背景图像：url（'data:image/svg+xml，“+stuff.innerHTML+”）；”）；
文件.正文.附件（一）；

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

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

作为bug测试的一部分，我将两者并排。。。实际的svg元素（显示良好）和与背景图像相同代码的div（不会显示）。因此，我假设我的问题在于如何将svg转换到数据url中，而不是svg本身

在此之前，我真的没有玩过内嵌SVG或数据URL。。。因此，很有可能是因为我试图使用数据URL或SVG的方式不正确地处理了它们

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

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

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

任何帮助都将不胜感激。

我想Chrome仍有此功能。你所做的应该在Firefox或Opera 12中起作用。请注意，IE9/10根本不支持foreignObject，不确定是否支持11。

Frak。。。好啊将在FireFox中检查它（从未担心过Explorer，但Chrome和Safari是至关重要的）。。。想知道这是否不是一个真正的bug，而是某人对安全功能的想法……这是一个隐私问题，因为存在各种不应允许的html内容，例如非数据URI的html图像、访问链接着色等。我猜webkit浏览器没有实现必要的限制，所以他们只是阻止了整个过程。。。Firefox甚至比不上Chrome。。。它会做一些奇怪的事情，比如把单引号转换成双引号，然后转义。。。svg元素也没有显示在那里。它还通过控制台声称svg格式不好。。。我不确定这是因为我只是简单地把它扔在一起，还是因为它在解析过程中弄乱了它。呸。所以真的没有什么好办法，嗯。。。唉。。。。会把你的答案标记为“我所能得到的最正确的答案”。谢谢。如果你修复了语法错误，应该可以在Firefox和Opera 12中使用。我恐怕没那么多。