0

我需要将生成的内联 SVG 设置为background-image其他元素上的 a ,如本示例所示。由于这仅在 Chrome 中有效,我需要一些其他方式将客户端绘制的 SVG 设置为background-image.

另一个可能更简单的内联 SVG 是这里看到的 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);
4

1 回答 1

1

它仅适用于 Chrome,因为您的数据 URL无效。应该是这样开始的...

data:image/svg+xml;charset=utf8,%3Csvg

你错过了这个charset=部分。您可能会考虑将其报告为眨眼错误

这是一个更正的版本

于 2013-06-19T13:52:39.847 回答