問題描述

我正在尋找一種方法來獲得傳單多邊形的模糊/模糊/漸變輪廓.

這應該有助于使國家/地區輪廓更加簡單(當前，當您放大代表國家/地區的 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

這篇關于具有模糊輪廓的傳單多邊形的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！