具有模糊轮廓的传单多边形
我正在寻找一种方法来获得传单多边形的模糊/模糊/渐变轮廓.
这应该有助于使国家/地区轮廓更加简单(当前,当您放大代表国家/地区的 svg 时,它会变得丑陋/不准确).
我正在考虑将 CSS 属性附加到与此类似的 svg:
I am looking for a way to have a fuzzy/blur/gradient outline of a leaflet polygon.
This should help make country outlines more simple (currently, when you zoom in to a svg representing a country, it gets ugly/inaccurate).
I was thinking about attaching CSS attributes to the svg similiar to this: http://www.w3schools.com/svg/svg_fegaussianblur.asp
But apparently the svg subelement <g>
(used for the leaflet polygon) does not accept this.
I also had a look at <defs>
of svg (see here: http://geoexamples.blogspot.be/2014/01/d3-map-styling-tutorial-ii-giving-style.html) but have no clue in applying this to leaflet.
http://leafletjs.com/examples/quick-start-example.html
解决方案You would first need to put the actual filter
element into the svg
element of the map, otherwise assigning a filter to a path
or g
won't work because the filter will be undefined. So you're going to need to do this in Javascript. But assigning a filter by classname in CSS is as far as i can see impossible because it will only work with the url()
function of CSS. That won't fly with the dynamic SVG embedded in Leaflet's overlaypane. You can however assign it with 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);
After that you can use the filter on polygons, linestrings, etc:
// 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)');
That's it, here's a working example on Plunker: http://plnkr.co/edit/JTNgeXuiBaL8LIbmkVjz?p=preview
相关文章