Question

我正在寻找一种在Leaflet中使用渐变填充创建圆的方法。到目前为止，我的方法是将圆圈的fillColor定义为＆＃39; url（#gradient）＆＃39;并通过以下代码手动添加渐变定义：

function createGradient (map) {
  // Get the SVG element from the overlayPane
  var svg = map.getPanes().overlayPane.firstChild;
  var doc = document.implementation.createDocument(null, null, null);
      // Create def element
  var svgDef = doc.createElement('defs');
      // Create gradient and stops element
  var svgGradient = doc.createElement("radialGradient");
  var svgStart = doc.createElement('stop');
  var svgStop = doc.createElement('stop');

  // Set ID attribute of gradient
  svgGradient.setAttribute('id', 'gradient');

  // set stops and colors
  svgStart.setAttribute('offset', '0%');
  svgStop.setAttribute('offset', '100%');
  svgStart.setAttribute('class', 'circle-start');
  svgStop.setAttribute('class', 'circle-stop');

  svgGradient.appendChild(svgStart);
  svgGradient.appendChild(svgStop);
  // Append blur element to filter element
  svgDef.appendChild(svgGradient);
  // Append filter element to SVG element
  svg.appendChild(svgDef);
}

有趣的是，最初没有显示渐变填充。但是，如果我进入devtools并删除＆＃39; defs＆＃39;阻止并再次添加它，正确显示渐变填充。任何人都可以帮助我摆脱这个问题，或者另一种方法来获得渐变填充吗？

Answer 1

您无法使用createElement创建SVG元素，仅适用于html元素。如果要创建SVG元素，则必须使用createElementNS在SVG名称空间中创建元素。

var svgDef = doc.createElementNS('http://www.w3.org/2000/svg', 'defs');
    // Create gradient and stops element
var svgGradient = doc.createElementNS("http://www.w3.org/2000/svg", "radialGradient");
var svgStart = doc.createElementNS('http://www.w3.org/2000/svg', 'stop');
var svgStop = doc.createElementNS('http://www.w3.org/2000/svg', 'stop');

使用devtools重新运行内容上的html解析器，它会神奇地纠正命名空间。

Leaflet中的圆形渐变填充

1 个答案: