Menu
I'm trying to add a shadow to my SVG. It works well with all 2D objects, but when same filter is applied to a straight line (either <line> or <path>), the line becomes invisible, and no shadow is added.
Demo: https://jsfiddle.net/ccj0Ldfh/1/
649
The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. Included in the CSS standard are several functions that achieve predefined effects.
SVGs are Special For most of our DOM elements, we can set a shadow using the box-shadow property which uses the element frame as the shape to define the shadow by: When dealing with text, we will want a more accurate shadow that represents the contours of each character as opposed to the rectangular-ish element frame.
You can easily add a drop-shadow effect to an svg-element using the drop-shadow() CSS function and rgba color values. By using rgba color values you can change the opacity of your shadow.
filter: drop-shadow(0 0 0.75rem crimson); A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image. Note: This function is somewhat similar to the box-shadow property.
Per the last paragraph here
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.
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
