具有模糊轮廓的单张多边形

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

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

我正在考虑将 CSS 属性附加到 svg 上，类似于这样：http://www.w3schools.com/svg/svg_fegaussianblur.asp 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://geoexamples.blogspot.be/2014/01/d3-map-styling-tutorial-ii-giving-style.html）但不知道将此应用于传单。

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

您首先需要将实际的filter元素进入svg地图的元素，否则将过滤器分配给path or g不起作用，因为过滤器未定义。所以你需要用 Javascript 来做这件事。但据我所知，在 CSS 中按类名分配过滤器是不可能的，因为它只能与url()CSS 的功能。如果将动态 SVG 嵌入 Leaflet 的覆盖面板中，那将无法实现。不过你可以用 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 http://plnkr.co/edit/JTNgeXuiBaL8LIbmkVjz?p=preview