SVG тень отрезана

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

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

вот так:

image of cutoff shadow

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).

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

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

path bounding box

Если это так:

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

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

41
clipping shadow svg svg-filters

3 ответов

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

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

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

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

69

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

filterUnits="userSpaceOnUse"

Окончательный Результат:

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

что делает тень absolutly расположенным и видимым вне своего контейнера.

5

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

svg {
  overflow: visible !important;
}

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

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

2