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

Question

我正在寻找一种方法来获得 fuzzy/blur/gradient 传单多边形的轮廓。

这应该有助于使国家轮廓更加简单（目前，当您放大代表国家的 svg 时，它会得到 ugly/inaccurate）。

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

我也看过 <defs> of 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 元素放入地图的 svg 元素中，否则将过滤器分配给 path 或 g 将不会'不起作用，因为过滤器将是未定义的。因此，您将需要在 Javascript 中执行此操作。但是据我所知，在 CSS 中按类名分配过滤器是不可能的，因为它只能与 CSS 的 url() 函数一起使用。这不会与 Leaflet 覆盖窗格中嵌入的动态 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

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

Leaflet polygon with fuzzy outline

javascript

css

maps

svg

leaflet