与模糊轮廓的传单多边形

Question

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

这应该有助于使国家概述更简单（目前，当你放大代表国家的svg时，它会变得丑陋/不准确）。

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

我还看了一下svg的<defs>（见这里：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元素放入地图的svg元素中，否则为path或g分配过滤器将无法正常工作因为过滤器将是未定义的。因此，您需要在Javascript中执行此操作。但是在CSS中按类名分配过滤器是我认为不可能的，因为它只适用于CSS的url()功能。这不会与Leaflet的overlaypane中嵌入的动态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