svg过滤器在传单“缩放”上的更改

我试图在Leaflet的某些svg路径中添加一些过滤器,以显示对象的不同“状态”,以提醒最终用户该特定对象出了问题。

我遇到的问题是滤镜在缩放时会发生变化,当缩小(路径变小)时,“发光”保持相同的大小(相对于路径变大),我需要它相对于路径保持不变路径而不是显示。例如,请参见下面的图片。

svg过滤器在传单“缩放”上的更改

svg过滤器在传单“缩放”上的更改

这是我的过滤器:

    <filter id='polygonStatus-endOfLife' filterRes="10 10" x="-20%" y="-20%" width="140%" height="140%"
            filterUnits="objectBoundingBox" primitiveUnits="userSpaceonUse" color-interpolation-filters="linearRGB">
        <feComposite in="SourceAlpha" in2="SourceAlpha" operator="arithmetic" k1="0" k2="8" k3="-0.5" k4="-0.5" x="0%" y="0%" width="100%" height="100%" result="composite"/>
        <feColorMatrix type="matrix" values="1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 1 0" x="0%" y="0%" width="100%" height="100%" in="composite" result="colormatrix1"/>
        <feMorphology operator="dilate" radius="10 10" x="0%" y="0%" width="100%" height="100%" in="colormatrix1" result="morphology1"/>
        <feGaussianBlur stdDeviation="10 10" x="0%" y="0%" width="100%" height="100%" in="morphology1" edgeMode="none" result="blur2"/>
        <feComposite in="blur2" in2="composite" operator="out" x="0%" y="0%" width="100%" height="100%" result="composite2"/>
        <feMerge x="0%" y="0%" width="100%" height="100%" result="merge">
            <feMergeNode in="composite2"/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>

我希望它更接近“放大”图像上的外观,更加微妙。我基本上需要它像您调整位图图像的大小一样(将第二个屏幕截图的大小调整为较小以了解我的意思)

gf420116 回答:svg过滤器在传单“缩放”上的更改

这是添加光晕的一种不寻常的方法-因为看起来您是分别绘制光晕然后在顶部绘制形状?通常,您可以通过滤镜直接向形状添加光晕。

如果您希望辉光随形状缩放并直接应用于形状,则应使用feGaussianBlur和nativeUnits =“ objectBoundingBox”尝试一些不同的操作。像这样:

<filter id="dropshadow" primitiveUnits="objectBoundingBox" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="0.05"/>
<feComposite operator="over" in="SourceGraphic"/>
</filter>
,

我想出了一个可行的解决方案。它可能不是最好的解决方案,但是直到找到更好的解决方案为止。

我正在使用jQuery来更改stdDeviation和缩放级别更改时的半径,如下所示:

map.on('zoomend',function(){
    var size = (Math.pow(map.getZoom(),2) / 50);
    $('#svgFilters feMorphology').attr('radius',size);
    $('#svgFilters feGaussianBlur').attr('stdDeviation',size);
});

我使用的是缩放级别的平方,然后除以50,以得到一个良好的外观,该外观在缩小时会变小,它比对我的应用程序来说看起来更好的路径本身变小。

本文链接:https://www.f2er.com/3105587.html

大家都在问