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

Question

看了一下互联网，却找不到答案。

我正在构建另一个自定义图像滑块，但需要能够处理正在动画的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来输入图像。

我在小提琴上找到了这样的示例，并尝试在上面的代码示例中使用此方法将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转换为我错过的图像？

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

任何帮助将不胜感激。

Answer 1

我猜Chrome仍然有此webkit错误。 您的工作在Firefox或Opera 12中应该可以正常工作。请注意IE9 / 10根本不支持foreignObject，不确定是否支持11。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-08-23 06:33:46

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-08-23 06:33:46

解决方案1
1 已采纳 2013-08-23 06:33:46