javascript - 如何将此文本的背景图像设置为 svg？

Question

从fiddle可以看出，我有一些代码将两个跨度的背景设置为用 svg 绘制的图像。我想在带有类“help”的跨度上使用 javascript(jquery 或 raw)动态地执行此操作，但代码不起作用。如何修复 javascript 以正确呈现 svg 图像作为该跨度的背景？

这是js代码:

$('span.help').css( {
  'background-image': 
  "url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'>"+
    "  <path d='M3,2 A25,25 0 0,1 25,2' style='stroke:#660000; stroke-width: 1; fill: none'/></svg>)",
  "font-size": "30px"
});

和 html:

<span class="works">ok</span>
<span class="help">nok</span>

这个相同但静态的 css 应用于类为“works”的跨度，它在 chrome 中有效，但在 firefox 中无效。

span.works {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'><path d='M3,2 A25,25 0 0,1 25,2' style='stroke:#660000; stroke-width: 1; fill: none'/></svg>");
  font-size: 30px;
});

Answer 1

就未编码的 DATA URI 完全有效而言(一些浏览器坚持使用 Base-64 编码)，您仍然需要引用 url() 的内容，尽管使用转义引号:

$('span').css( {
  'background-image': 
  "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'>"+
    "  <path d='M3,2 A25,25 0 0,1 25,2' style='stroke:#660000; stroke-width: 1; fill: none'/></svg>\")",
  "font-size": "30px"
});

示例:http://jsfiddle.net/SJjJb/1427/