<!DOCTYPE html>
<html lang="en">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="drop-shadow" color-interpolation-filters="sRGB">
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Using the filter on the blue path causes it to dissapear -->
<path d="M000,100 L300,100" stroke="blue" fill="transparent" stroke-width="5" filter="url(#drop-shadow)"/>
<!-- RENDERS FINE -->
<path d="M000,200 L300,200" stroke="red" fill="transparent" stroke-width="5" filter=""/>
<!-- SHADOW WORKS ON RECTANGLE FINE -->
<rect filter="url(#drop-shadow)" x="0" width="300" height="10" fill="green"/>
</svg>
</html>Is it possible to use the drop shadow on an unclosed path element that has a stroke?
Applying the drop shadow filter seems to just make the path disappear.
I thought a path with a stroke would be rendered in a similar fashion to a <rect>, as shown in my example.
Am I missing something here? Or does one just need a closed in order to use the dropshadow filter?