Javascript 具有模糊轮廓的小叶多边形

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

这将有助于使国家轮廓更加简单（当前，当您放大表示国家的svg时，它会变得丑陋/不准确）

我正在考虑将CSS属性附加到svg，类似于： 但是svg子元素

（用于传单多边形）显然不接受这一点

我还查看了svg的

（请参见此处：），但对于如何将其应用于传单，我没有任何线索

---

首先需要将实际的

过滤器

元素放入地图的

svg

元素中，否则将过滤器分配给

路径

或

g

将无法工作，因为过滤器将未定义。所以你需要用Javascript来完成这项工作。但是在CSS中按类名分配过滤器是不可能的，因为它只适用于CSS的

url（）

函数。在传单的覆盖平面中嵌入动态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的工作示例：

谢谢！这与我想要实现的目标非常接近。我对你的plunker做了一些修改：只有一个问题：当你向外滚动时，

的边缘变得非常尖锐。有没有办法让它“溢出”到

的边缘？不，谢谢，不客气，如果答案是你问题的解决方案，就接受吧。我明白你的意思。我在实际的

path

元素上设置了模糊，而不是在

g

元素上，但是我尝试在

g

元素上设置模糊：

polygon.\u container.setAttribute（'filter'，'url（#blur'）

（容器是实际的

g

元素），缩放时呈现完全相同的内容。当我有时间的时候，我会做更多的实验，但我猜这只是一种方式，或者需要做一些昂贵的事情，比如在缩放时删除和添加多边形，如果这样做可行的话，这是一个选项。我猜性能选项没有实际的宽度或样式，但只是svg子对象的容器，这里是一个路径。因此溢出（如果可能）必须应用于path元素。但是添加overflow=“visible”似乎没有任何作用。经过一些研究，我现在知道overflow不起作用：“overflow属性应用于建立新视口的元素（见下文）、元素和元素。对于所有其他元素，该属性都没有效果。”我认为解决方案在于

过滤器单元

，看，我在设置过滤器的

width

和

height

方面运气不错，但我认为关键是

x

an

y

坐标。请参见更新plunk:抱歉，忘记冻结：）正如您所看到的，它现在在右侧和底部都正常工作，这使我认为使用

x

和

y

坐标移动实际的过滤效果区域就可以了。到目前为止，我没有任何运气，因为我想我需要正确的路径坐标，现在我没有太多时间来测试/玩。