Why does a drop-shadow get cutoff when applying it to the path of an svg?
I have two identical svgs. One having a drop-shadow applied to the <svg> element and another with the same drop-shadow applied to the <path> element inside the <svg> element.
The svg with the drop-shadow applied to the <svg> element is fine. The other however get's cutoff.
My question is why?
I've fiddled with filter region, viewbox, and instead of css drop-shadow using feDropShadow/feGaussianBlur inside <filter>, but nothing quite works as desired. I'm quite new to working with svg's though.
Here is the example on codepen. https://codepen.io/healspls/pen/bGXOKEy
Thank you for taking the time.
8 Replies
because that's where the svg ends
Can the svg element dropshadow extend beyond the view-box while the path element dropshadow cannot?
no
increase the viewbox and move the path
that's all you can do
I remember getting something like this to work once by playing with CSS
overflow on the SVGif that works, sounds like a bug
Works across Chrome and Firefox. Not sure why this would be a bug. Default for SVG is
overflow: hidden; just change it to visible to show the overflow. Here's the SVG overflow attribute article that also mentions CSS overflow: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/overflowbecause it's showing stuff outside the viewbox
re-downloaded webkitForWindows last night for something so checked
overflow quick on the pen and overflow was a no go. I'm not super confident that this means for sure it wont work on Safari on an actual apple device though. Probably worth confirming on real hardware if you're looking to use.
Looks like overflow on SVG is part of SVG 2.1 which is in an editors draft so wouldn't a surprise if not everyone supported it yet: https://svgwg.org/svg2-draft/render.html#OverflowAndClipProperties