为什么 feDropShadow 过滤器会切断部分路径？答案

【问题标题】：Why does the feDropShadow filter cut off part of the path?为什么 feDropShadow 过滤器会切断部分路径？
【发布时间】：2021-01-07 07:25:04
【问题描述】：

我使用 SVG 路径绘制了一张地图，并通过过滤器添加了阴影，如下所示：

<svg viewBox="0 0 25220 23850" id="ext-element-2036">
    <g class="dashboard-map">
        <g id="ext-dashboard-map-3-p-30" class="map-polygon dashboard-map-sel">
            <path id="ext-dashboard-map-3-p-30-path" d="m 16830.9,14436.3 -270.1,-220.6 135,-235.6 110.1,-15 -40,-185.5 -350.1,75.2 -10,-195.5 -125,-95.2 15,-165.4 -250.1,-110.3 95,-145.4 10,-225.5 280.1,60.1 90,-436.1 255.1,-175.4 540.1,-5 120,115.3 -75,125.3 115,110.3 -25,155.4 440.1,-125.4 v 210.6 l -130,160.4 165,125.3 240.1,-55.2 60,461.2 395,35.1 -20,125.3 50.1,5 120,250.6 -40,260.7 180,40.1 -110,185.4 -210.1,70.2 235.1,55.1 -135,135.4 45,160.4 -115.1,135.3 -395,-120.3 -135.1,200.5 -510.1,35.1 -65,-105.3 -330.1,235.6 -185,-140.3 -110,50.1 65,115.3 -325.1,-125.3 15,70.1 -110,5.1 -15,-95.3 -85,-50.1 250,-150.4 -5,-275.7 135.1,-135.3 z" fill="#F44336" stroke="#000000" style="stroke-width: 1;" data-tooltip-content="#ext-dashboard-map-3-p-30tooltip_content" class="map-tooltip" filter="url(#ext-dashboard-map-3-mo_shadow)"/>
        </g>
    </g>
    <defs>
        <filter id="ext-dashboard-map-3-mo_shadow" x="0" y="0" width="200%" height="200%">
            <feDropShadow dx="0" dy="200" stdDeviation="90" flood-color="#000000" flood-opacity="0.3"/>
        </filter>
    </defs>
</svg>

但是路径在顶部和左侧被切断了。

picture

有什么问题？

【问题讨论】：

标签： svg svg-filters

【解决方案1】：

看起来您只需通过调整 x 和 y 属性将过滤器区域向左和向上移动一点。

<svg viewBox="0 0 25220 23850" id="ext-element-2036">
    <g class="dashboard-map">
        <g id="ext-dashboard-map-3-p-30" class="map-polygon dashboard-map-sel">
            <path id="ext-dashboard-map-3-p-30-path" d="m 16830.9,14436.3 -270.1,-220.6 135,-235.6 110.1,-15 -40,-185.5 -350.1,75.2 -10,-195.5 -125,-95.2 15,-165.4 -250.1,-110.3 95,-145.4 10,-225.5 280.1,60.1 90,-436.1 255.1,-175.4 540.1,-5 120,115.3 -75,125.3 115,110.3 -25,155.4 440.1,-125.4 v 210.6 l -130,160.4 165,125.3 240.1,-55.2 60,461.2 395,35.1 -20,125.3 50.1,5 120,250.6 -40,260.7 180,40.1 -110,185.4 -210.1,70.2 235.1,55.1 -135,135.4 45,160.4 -115.1,135.3 -395,-120.3 -135.1,200.5 -510.1,35.1 -65,-105.3 -330.1,235.6 -185,-140.3 -110,50.1 65,115.3 -325.1,-125.3 15,70.1 -110,5.1 -15,-95.3 -85,-50.1 250,-150.4 -5,-275.7 135.1,-135.3 z" fill="#F44336" stroke="#000000" style="stroke-width: 1;" data-tooltip-content="#ext-dashboard-map-3-p-30tooltip_content" class="map-tooltip" filter="url(#ext-dashboard-map-3-mo_shadow)"/>
        </g>
    </g>
    <defs>
        <filter id="ext-dashboard-map-3-mo_shadow" x="-10%" y="-10%" width="200%" height="200%">
            <feDropShadow dx="0" dy="200" stdDeviation="90" flood-color="#000000" flood-opacity="0.3"/>
        </filter>
    </defs>
</svg>

【讨论】：

我正在尝试这个但没有 %，就像“-10”一样。成功了，谢谢