SVG shadow cut off

by

You need to increase the size of the filter region.

<filter id="SVGID_0" y="-40%" height="180%">

works just fine. The silent defaults for the filter region are: x=”-10%” y=”-10%” width=”120%” height=”120%” – large blurs usually get clipped. (Your shadow isn’t getting clipped horizontally because your width is about 2.5x your height – so that 10% results in a wider horizontal filter region). Also, the y filter region seems to be calculated as if the path had a zero pixel stroke, so it’s ignoring the stroke width. (Different browsers have different behavior wrt whether they consider the stroke to be part of the bounding box for purposes of filter region calculation.)

(Update: Moving up observations from comments)
Please note that if your particular shape is either zero width or zero height (e.g. a horizontal or vertical line), then you must specify filterUnits="userSpaceOnUse" as part of the filter declaration and explicitly specify a filter region (x,y,width height) in userSpaceUnits (usually pixels) that creates enough room to display a shadow.

More Related Contents:

  1. Adding feDropShadow to a vertical line in SVG makes it disappear
  2. is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]
  3. svg text wrapping issues
  4. SVG drop shadow using css3
  5. How to calculate the SVG Path for an arc (of a circle)
  6. Circle drawing with SVG’s arc path
  7. Can you control how an SVG’s stroke-width is drawn?
  8. How to convert a PNG image to a SVG? [closed]
  9. Removing transforms in SVG files
  10. How to use the viewBox attribute?
  11. Remove the host HTML element selectors created by angular component
  12. How many levels of recursion does SVG support?
  13. SVG Line with Gradient Stroke Won’t Display if vertical or horizontal
  14. semantic zooming of the force directed graph in d3
  15. Catmull-Rom interpolation on SVG Paths
  16. Default background color of SVG root element
  17. How to convert/save d3.js graph to pdf/jpeg
  18. Scale and mirror SVG object
  19. How to convert a SVG to a PNG with ImageMagick?
  20. vertical alignment of text element in SVG
  21. Crop to fit an svg pattern
  22. Do SVG docs support custom data- attributes?
  23. SVG angular gradient
  24. Avoiding lines between adjecent svg rectangles
  25. SVG Image in JavaFX 2.2
  26. Converting an svg arc to lines
  27. Pure SVG way to fit text to a box
  28. SVG images blocked by gmail proxy
  29. Why can’t I reference an SVG linear gradient defined in an external file (paint server)?
  30. Convert SVG polygon to path

Leave a Comment