Оттенок SVG отключен

В SVG, с которым я работаю, есть тень с помощью фильтра feGaussianBlur.

Сам тень отображается правильно, но обрезается сверху и снизу.

Так же:

Соответствующий SVG:

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg
  PUBLIC '-//W3C//DTD SVG 1.1//EN'
  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg height="600" version="1.1" width="700" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs/>
  <filter id="SVGID_0">
    <feGaussianBlur in="SourceGraphic" stdDeviation="6.6"/>
    <feOffset dx="0" dy="0"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <path d="M 0 83 Q 0 83 0 83 Q 0 83 6 79.5 Q 12 76 17 71 Q 22 66 30.5 57.5 Q 39 49 54 36 Q 69 23 82.5 16.5 Q 96 10 120 4.5 Q 144 -1 170.5 0 Q 197 1 218 16.5 Q 239 32 253.5 51 Q 268 70 278 83.5 Q 288 97 299 110 Q 310 123 320 129.5 Q 330 136 338 136.5 Q 346 137 355 129.5 L 364 122" stroke-linecap="round" style="stroke: #005e7a; stroke-width: 30; fill: none; filter: url(#SVGID_0);" transform="translate(50 50)" />
</svg>

Похоже, что обрезка происходит в Chrome (30), Firefox (25) и Opera (12).

Я вижу, что это ограничение не ограничено, поскольку оно установлено на 600x700.

Я также вижу в инспекторе devtools ограничительную рамку элемента <path> , и это почти так, как если бы это сократило тень:

Если это случай:

Почему тень отключается только вертикально, а не горизонтально?
Как обойти это, чтобы он не был обрезан таким образом?

Если это не ограничивающая рамка, что вызывает это и как избежать этого отсечения?

Ответ 1

Вам нужно увеличить размер области фильтра.

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

работает просто отлично. Тихие значения по умолчанию для области фильтра: x = "- 10%" y = "- 10%" width = "120%" height = "120%" - большие размытия обычно обрезаются. (Ваша тень не обрезается горизонтально, потому что ваша ширина составляет около 2,5x от вашей высоты - так что 10% приводит к более широкой области горизонтального фильтра). Кроме того, область y-фильтра, по-видимому, вычисляется так, как если бы путь имел ход с нулевым пикселем, поэтому он игнорировал ширину штриха. (У разных браузеров разное поведение зависит от того, считают ли они, что удар является частью ограничительной рамки для расчета области фильтра.)

(Обновление: перемещение наблюдений с комментариев) Обратите внимание, что если ваша конкретная форма имеет нулевую ширину или нулевую высоту (например, горизонтальную или вертикальную линию), тогда вы должны указать filterUnits="userSpaceOnUse" как часть объявления фильтра и явно указать область фильтра ( x, y, width height) в userSpaceUnits (обычно пикселей), что создает достаточное пространство для отображения тени.

Ответ 2

Как указано в комментарии выше, исправление для меня заключалось в добавлении атрибута в тэг svg тэга filter.

filterUnits="userSpaceOnUse"

Конечный результат:

<filter id="dropshadow" height="130%" width="130%" filterUnits="userSpaceOnUse">

Это делает тень абсолютно позиционированной и видимой вне ее контейнера.

Ответ 3

Если вы используете его внутри HTML, вы можете просто использовать свойства CSS, чтобы исправить эту проблему.

svg {
  overflow: visible !important;
}

Я не проверял другие браузеры, но хром имеет overflow: hidden по умолчанию в тегах svg.

Немного поздно, но я надеюсь, что это будет полезно.