javascript - 动态添加 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 namespace 中创建新元素，而 SVG 元素必须在 SVG namespace 中创建。您不能在 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" plugin它有很多用于常见 SVG 操作的便捷方法，包括 create linear gradients 的能力.