Question

从fiddle可以看到，我有一些代码可以将两个跨度的背景设置为使用svg绘制的图像。我想在带有“帮助”类的跨度上使用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”类的span，它在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/

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

1 个答案: