單張中圓圈的漸變填充

Question

我正在尋找一種在Leaflet中創建帶有漸變填充的圓的方法。 到目前為止，我的方法是將圓形的fillColor定義為“ url（#gradient）”，並通過以下代碼手動添加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解析器，可以神奇地糾正名稱空間。