【发布时间】：2013-06-15 19:45:33
【问题描述】：
我需要在其他元素上将生成的内联 SVG 设置为 background-image，如 in this example 所示。由于这仅在 Chrome 中有效，因此我需要其他方法将客户端绘制的 SVG 设置为 background-image。
另一个可能更简单的内联 SVG 是 seen here 的 RaphaelJS 演示。
<svg height="480" version="1.1" width="640" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; top: -0.90625px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><rect x="0" y="0" width="640" height="480" r="10" rx="10" ry="10" fill="#ffffff" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><circle cx="320" cy="240" r="60" fill="#223fa3" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 0.5;" stroke-width="80" stroke-opacity="0.5"></circle></svg>
是否可以将服务器上的内联 SVG（由 RaphaelJS 在客户端创建）转换为“真实”的 SVG 文件？它是一个 Windows (.NET/c#) 服务器环境，应在其上进行转换。
编辑
正如 Robert Longson 注意到的那样，我错过了 charset=，此外，我似乎使用了错误的函数 (encodeURI) 来编码内联 SVG。
为了完整起见，此处设置适用于我的 background-image 的代码片段
var svgUrl = 'url("data:image/svg+xml;charset=utf8,' + encodeURIComponent($('#raphaelPaper').html()) + '")';
$('#pictureDummy').css('background-image', svgUrl);
【问题讨论】：
-
为什么不简单的获取
<svg>节点的内容，保存在服务器端的.svg文件中呢？ -
@Blackhole 看起来内联的
<svg>与.svg文件内容不一样。我已经尝试保存它，但 Inkskape 和任何浏览器都无法打开该文件。我对 SVG 的内容并不深入，但看起来仅仅保存是不够的。 -
我刚刚找到了一个名为
Raphael.Export的库。看起来它可以将客户端生成的 SVG 导出到 .svg 文件。但不确定它是否适用于我生成的东西。只是尝试。
标签： c# css svg raphael background-image