Svg shadow gets cut only when transforming parent with same dimensions

user_10696487 0
Viewed 60

I have an svg which takes its parent width, but when I scale or rotate the parent the svg's drop shadow gets cut. The left one is fine, but when the parent is the same width and height of the svg (right one) it behaves different. I have overflow visible and filterUnits="userSpaceOnUse" http://jsfiddle.net/xrsknjfv/

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>

svg css html
1 Answers

Overflow shadows aren't retained during transform transitions - so you need to add margin/padding to your box to make sure they're ok.

Incidentally, you can make your SVG a lot terser

  • You don't need to re-declare filters within each inline SVG fragment
  • You only need to declare your filterUnits in the filter element itself (not each primitive)
  • You can use self-closing tags for feDropshadow ("/>")
  • You can get rid of the style and just declare a filter attribute directly.

<div>
  <button id="scale">
    scale
  </button>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.96 254.59">
      <defs>
        <filter id="f1" >
          <feDropShadow  dx="1.5" dy="0.8" stdDeviation="1"/>
        </filter>
        <filter  id="f2">
          <feDropShadow dx="-2" dy="1.8" stdDeviation="1"/>
        </filter>
        <filter   id="f3" >
          <feDropShadow stdDeviation="10" dy="-4" dx="-2"/>
        </filter>
      </defs>
      <g filter="url(#f2)">
        <g 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" filter= "url(#f1)"></path>
        </g>
      </g>
    </svg>                            
  </div>
  <div>
  
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.96 254.59">
      <g filter= "url(#f2)">
        <g 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" filter= "url(#f1)"></path>
        </g>
      </g>
    </svg>                            
  </div>
</div>

user_2713530
Related