Adding feDropShadow to a vertical line in SVG makes it disappear

by

You can’t use objectBoundingBox units if your shape has no height or width.

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

The default for filterUnits is objectBoundingBox units so you need to change that to userSpaceOnUse i.e.

<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg">
  <title>Line Drop Shadow</title>
  <description>A red line with 5px width thickness and round caps, having a drop-shadow. This highlights the regression documented in PURP-1017.</description>
  <defs>
    <filter id="dropShadow" filterUnits="userSpaceOnUse">
      <feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
    </filter>
  </defs>
  <g id="Artboard" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round">
    <path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1"></path>
  </g>
</svg>

More Related Contents:

  1. SVG shadow cut off
  2. is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]
  3. svg text wrapping issues
  4. Circle drawing with SVG’s arc path
  5. Can you control how an SVG’s stroke-width is drawn?
  6. How to convert a PNG image to a SVG? [closed]
  7. Removing transforms in SVG files
  8. How to use the viewBox attribute?
  9. Remove the host HTML element selectors created by angular component
  10. How many levels of recursion does SVG support?
  11. SVG Line with Gradient Stroke Won’t Display if vertical or horizontal
  12. semantic zooming of the force directed graph in d3
  13. Catmull-Rom interpolation on SVG Paths
  14. Default background color of SVG root element
  15. How to convert/save d3.js graph to pdf/jpeg
  16. Scale and mirror SVG object
  17. How to convert a SVG to a PNG with ImageMagick?
  18. Crop to fit an svg pattern
  19. Why doesn’t hue rotation by +180deg and -180deg yield the original color?
  20. How to place multiple evenly-spaced arrowheads along an SVG line?
  21. SVG Positioning
  22. How to calculate required hue-rotate to generate specific colour?
  23. How can I cut one shape inside another?
  24. Avoiding lines between adjecent svg rectangles
  25. Can I apply a gradient along an SVG path?
  26. SVG Image in JavaFX 2.2
  27. Converting an svg arc to lines
  28. Simple fill pattern in svg : diagonal hatching
  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