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

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

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

Вот так:

изображение срезающей тени

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

              

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

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

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

ограничивающая рамка

Если это так:

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

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

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

  

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

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

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

 filterUnits="userSpaceOnUse" 

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

  

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

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

 svg { overflow: visible !important; } 

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

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

Давайте будем гением компьютера.