Leaflet 中圆形的渐变填充

Question

我正在寻找一种在 Leaflet 中创建带有渐变填充的圆圈的方法。到目前为止，我的方法是将圆的 fillColor 定义为 'url(#gradient)' 并通过以下代码手动添加渐变定义：

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 并删除 'defs' 块并再次添加它，渐变填充将正确显示。谁能帮我解决这个问题，或者用其他方法获得渐变填充？

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 中圆形的渐变填充

Gradient fill for circle in Leaflet

javascript

svg

leaflet