CODEWITHSUNDEEP
svgsvg-filters
KuJIT
KuJIT

Reputation: 13

Why does the feDropShadow filter cut off part of the path?

I drew a map using SVG paths and added a shadow by filter like this:

<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>

but the the path was cut off on the top and left.

picture

What is the problem?

Upvotes: 1

Views: 229

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

Looks like you just need to move the filter area a little further left and up by adjusting the x and y attributes.

<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>

Upvotes: 2

Related Questions