SVG shadow не появляется

166

13 декабря 2017, 21:27

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

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

Вот так:

Ниже код этой картинки:

<?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>

Почему тень обрезается только по вертикали, а горизонтально не обрезается?

Answer 1

Вам нужно увеличить размер filter region

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

Работает просто отлично.

Значения по умолчанию для области фильтра: x = "- 10%" y = "- 10%" width = "120%" height = "120%" - большие размеры размытия обычно обрезаются..

(Ваша тень не обрезается горизонтально, потому что ширина вашей фигуры составляет около 2,5x от вашей высоты, так что дополнительных 10% региона действия фильтра попадают в эту область вашей фигуры)

Кроме того, область y-фильтра, по-видимому, вычисляется так, как если бы path имел stroke с нулевым пикселем, поэтому фильтр игнорирует ширину stroke.

(У разных браузеров разное поведение зависит от того, считают ли они, что stroke является частью bounding box для расчета области фильтра).

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

<?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"  y="-40%" height="180%"> 
    <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>