传单中圆圈的渐变填充

Gradient fill for circle in Leaflet

本文关键字：渐变 填充 单中圆      更新时间：2023-09-26

我正在寻找一种在传单中使用渐变填充创建圆的方法。到目前为止，我的方法是将圆的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"块并再次添加它，梯度填充就会正确显示。有人能帮我解决这个问题吗？或者用另一种方法来填充渐变？

您不能使用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解析器，从而神奇地更正名称空间。

相关文章：