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

【问题标题】：How to set the background-image of this text to an svg?如何将此文本的背景图像设置为 svg？
【发布时间】：2014-07-30 04:35:16
【问题描述】：

从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;
});

【问题讨论】：

标签： javascript jquery html css svg

【解决方案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/

【讨论】：