svg - почему нету заливки?
 

Нарисовал на svg такое:
https://jsfiddle.net/62yp08v5/

Почему не работает fill?
(втрой элемент path)

Рисую фигуру 2-мя <path>,
потому что к первой части фигуры (кривая) нужно применять тень.
А к второй части тень не нужна.
Когда я рисую вторую часть фигуры (polyline) и заливаю ее получается такая хрень:
https://jsfiddle.net/16ow4us9/

Как мне залить фигуру нарисованную 2-мя path, как сдесь:
https://jsfiddle.net/62yp08v5/

<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1140 87" style="width: 1140px; height: 87px;">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="5p" dy="5" stdDeviation="3"/>
    </filter>
  </defs>
  <path d="M 0 60 C 0 60 283 87 427 43.5 C 427 43.5 855 -60 1143 60 L 1143 0 0 0 Z" 
  style="stroke:red;fill:red;filter:url(#shadow);" />
 </svg>

filter: drop-shadow - работает только с <image>