javascript - 具有模糊轮廓的传单多边形

Question

我正在寻找一种方法来制作传单多边形的模糊/模糊/渐变轮廓。

这应该有助于使国家轮廓更加简单(目前，当您放大代表国家的 svg 时，它会变得丑陋/不准确)。

我正在考虑将 CSS 属性附加到类似于此的 svg:http://www.w3schools.com/svg/svg_fegaussianblur.asp但显然 svg 子元素 <g> (用于传单多边形)不接受这个。

我也看过<defs>的 svg(参见此处:http://geoexamples.blogspot.be/2014/01/d3-map-styling-tutorial-ii-giving-style.html)，但不知道将其应用于传单。

http://leafletjs.com/examples/quick-start-example.html

Answer 1

您首先需要将实际的 filter 元素放入 map 的 svg 元素中，否则将过滤器分配给 path 或g 将不起作用，因为过滤器将是未定义的。因此，您将需要使用 Javascript 执行此操作。但据我所知，在 CSS 中按类名分配过滤器是不可能的，因为它只能与 CSS 的 url() 函数一起使用。这不会与 Leaflet 覆盖 Pane 中嵌入的动态 SVG 一起运行。但是，您可以使用 Javascript 分配它:

// Get the SVG element from the overlayPane
var svg = map.getPanes().overlayPane.firstChild,
    // Create filter element
    svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter'),
    // Create blur element
    svgBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');

// Set ID attribute of filter
svgFilter.setAttribute('id', 'blur');

// Give room to blur to prevent clipping
svgFilter.setAttribute('x', '-100%');
svgFilter.setAttribute('y', '-100%');
svgFilter.setAttribute('width', '500%');
svgFilter.setAttribute('height', '500%');

// Set deviation attribute of blur
svgBlur.setAttribute('stdDeviation', 3);

// Append blur element to filter element 
svgFilter.appendChild(svgBlur);
// Append filter element to SVG element
svg.appendChild(svgFilter);

之后，您可以在多边形、线串等上使用过滤器:

// Creating a polygon and adding to the map
var polygon = L.polygon([[10, 10],[-10,10], [-10,-10],[10,-10]]).addTo(map);

// Set filter attribute on the polygon
polygon._path.setAttribute('filter', 'url(#blur)');

就是这样，这里有一个关于 Plunker 的工作示例:http://plnkr.co/edit/JTNgeXuiBaL8LIbmkVjz?p=preview