动态添加SVG渐变

Question

我有这个带路径的SVG容器.我想编辑它,所以路径的填充将是一个模式.这是我失败的尝试:

我添加了一个渐变:

$('svg defs').prepend('<linearGradient id="MyGradient"><stop offset="5%" stop-color="#F60" /><stop offset="95%" stop-color="#FF6" /></linearGradient>');

然后更改路径的填充:

$(base + ' svg path').each(function() {
    this.setAttribute('fill','url(#MyGradient)')
}

这不起作用.我错过了什么？

Answer 1

你的问题(你"缺少")是jQuery在XHTML命名空间中创建新元素,而SVG元素必须在SVG命名空间中创建.您不能在SVG元素的字符串中使用原始代码.

最简单的(无插件)方法是停止依赖jQuery这么多,只需使用简单的DOM方法来创建元素.是的,它比仅使用jQuery为你神奇地构建元素更加冗长......但jQuery在这种情况下不起作用.

演示:http://jsfiddle.net/nra29/2/

createGradient($('svg')[0],'MyGradient',[
  {offset:'5%', 'stop-color':'#f60'},
  {offset:'95%','stop-color':'#ff6'}
]);
$('svg path').attr('fill','url(#MyGradient)');

// svg:   the owning <svg> element
// id:    an id="..." attribute for the gradient
// stops: an array of objects with <stop> attributes
function createGradient(svg,id,stops){
  var svgNS = svg.namespaceURI;
  var grad  = document.createElementNS(svgNS,'linearGradient');
  grad.setAttribute('id',id);
  for (var i=0;i<stops.length;i++){
    var attrs = stops[i];
    var stop = document.createElementNS(svgNS,'stop');
    for (var attr in attrs){
      if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr,attrs[attr]);
    }
    grad.appendChild(stop);
  }

  var defs = svg.querySelector('defs') ||
      svg.insertBefore( document.createElementNS(svgNS,'defs'), svg.firstChild);
  return defs.appendChild(grad);
}

使用图书馆

或者,您可以包含Keith Woods的"jQuery SVG"插件,该插件具有许多常用SVG操作的便捷方法,包括创建线性渐变的功能.