Why is the drop shadow of my SVG getting cut off when I scale or rotate its parent element? The behavior seems to change when the parent element is the same width and height as the SVG. Here's a link for reference.
scale.addEventListener("mousedown", function(){
this.parentElement.classList.toggle("scale");
})svg{
fill: yellow;
overflow: visible;
width: 100%;
}
body > div{
position: absolute;
left: 50px;
top: 50px;
}
div > div{
display: inline-block;
width: 150px;
transition: 5s all;
}
div > div:nth-of-type(1){
padding: 15px;
}
div.scale > div{
transform: scale(0);
}<div>
<button id="scale">
scale
</button>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.96 254.59">
<defs>
<filter filterUnits="userSpaceOnUse" id="f1">
<feDropShadow filterUnits="userSpaceOnUse" dx="1.5" dy="0.8" stdDeviation="1"></feDropShadow>
</filter>
<filter filterUnits="userSpaceOnUse" id="f2">
<feDropShadow filterUnits="userSpaceOnUse" dx="-2" dy="1.8" stdDeviation="1"></feDropShadow>
</filter>
<filter filterUnits="userSpaceOnUse" id="f3">
<feDropShadow flood-opacity="0.1" stdDeviation="10" dy="-4" dx="-2" filterUnits="userSpaceOnUse"></feDropShadow>
</filter>
</defs>
<g style="filter: url(#f2);">
<g style="filter: url(#f3);">
<path d="M167.1,52.17S209.77-28.24,301.66,10.6c0,0,59.62,23.52,56.34,96.81,0,0,55.45,16.41,51.79,79.86,0,0-.3,61.95-67.65,67.28H220.75q-72.56,0-145.12,0C29.57,254.66-2.8,215,.19,170.31c0,0,7.74-70,81.58-68.37C81.77,101.94,101.46,42.87,167.1,52.17Z" style="filter: url(#f1);"></path>
</g>
</g>
</svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.96 254.59">
<defs>
<filter filterUnits="userSpaceOnUse" id="f1">
<feDropShadow filterUnits="userSpaceOnUse" dx="1.5" dy="0.8" stdDeviation="1"></feDropShadow>
</filter>
<filter filterUnits="userSpaceOnUse" id="f2">
<feDropShadow filterUnits="userSpaceOnUse" dx="-2" dy="1.8" stdDeviation="1"></feDropShadow>
</filter>
<filter filterUnits="userSpaceOnUse" id="f3">
<feDropShadow flood-opacity="0.1" stdDeviation="10" dy="-4" dx="-2" filterUnits="userSpaceOnUse"></feDropShadow>
</filter>
</defs>
<g style="filter: url(#f2);">
<g style="filter: url(#f3);">
<path d="M167.1,52.17S209.77-28.24,301.66,10.6c0,0,59.62,23.52,56.34,96.81,0,0,55.45,16.41,51.79,79.86,0,0-.3,61.95-67.65,67.28H220.75q-72.56,0-145.12,0C29.57,254.66-2.8,215,.19,170.31c0,0,7.74-70,81.58-68.37C81.77,101.94,101.46,42.87,167.1,52.17Z" style="filter: url(#f1);"></path>
</g>
</g>
</svg>
</div>
</div>