SVG掩盖性能速度

Question

我正在开发一张地图，当你点击Darkened Map的一部分时，它会在下面显示一部分更轻的地图。我这样做的方法是在JS中使用onclick监听器。事件侦听器比为HTML创建掩码元素并为每次单击调整其属性。这很有用......但是，如果我在地图上点了很多次点击以显示很多地图，那么与svg的交互开始变得非常迟缓和缓慢。这是将这些掩码元素添加到DOM的最佳方法吗？或者是否有更好的方法来实现与地图的这种互动？我应该这样添加多个html元素吗？

$('#parentID').click(function (event){

     var whiteMask = document.createElementNS("http://www.w3.org/2000/svg", "circle");
     whiteMask.setAttribute('cx', coords.x );
    whiteMask.setAttribute('cy', coords.y );
    whiteMask.setAttribute('r', 40);
    whiteMask.setAttribute('filter', 'url(#filter2)');
    whiteMask.setAttribute('id', idName);
    whiteMask.setAttribute('fill', 'white');

   document.getElementById("mask1").appendChild(whiteMask);