Не работает svg shadow

277

18 октября 2018, 20:00

У меня возникла проблема с настройкой тени для svg с примененной к нему маской.
jsfiddle: http://jsfiddle.net/3kxnmhfL/

Ниже код:

.watch-video-svg { 
  width: 50px; 
  height: 50px; 
}

<div class="watch-video-svg"> 
  <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" height="100%" width="100%" viewBox="0 0 100 100"> 
    <defs> 
        <filter id="shadow"> 
            <feDropShadow dx="4" dy="8" stdDeviation="4"/> 
        </filter> 
        <mask id="cut-off-bottom"> 
            <circle cx="50%" cy="50%" r="50%" fill="white"/> 
            <polygon points="31,20, 31,77, 80,50" fill="black"/> 
            <!-- <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  /> --> 
        </mask> 
    </defs> 
    <circle cx="50%" cy="50%" r="50%" fill="red" mask="url(#cut-off-bottom)" filter="url(#shadow)" /> 
</svg> 
</div>

Я хочу, чтобы тень появлялась только вокруг круга SVG и не содержала div.

Что может быть причиной того, почему тень не появляется?

Answer 1

У SVG фильтров есть параметр - filter region.
filter region определяет область пикселей, которую браузер использует для хранения результатов действия фильтров. filter region по умолчанию - это границы элемента (к которому применяется фильтр) плюс margin вокруг него, чтобы позволить фильтрующим элементам, имеющим результаты, превышать размеры исходного элемента.

Однако, в вашем случае stdDeviation равный 4 заставляет размытие расширяться дальше, чем 10% от нормы.

Результатом является обрезанное размытие, хотя viewBox был увеличен достаточно, чтобы обеспечить полное размытие.

Чтобы исправить это, вам просто нужно увеличить размер области фильтра.
Величина равная 20%, похоже, работает нормально.

<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">

Кроме того, я упростил SVG, избавившись от ненужной маски. Я также изменил viewBox, чтобы включить часть размытия, которая простирается влево.

.watch-video-svg { 
  width: 500px; 
  height: 500px; 
  background: linen; 
}

<div class="watch-video-svg"> 
  <svg xmlns="http://www.w3.org/2000/svg"  height="100%" width="100%" viewBox="-5 0 120 120"> 
    <defs> 
        <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"> 
            <feDropShadow dx="4" dy="8" stdDeviation="4"/> 
        </filter> 
    </defs> 
    <circle cx="50" cy="50" r="50" fill="red" filter=url(#shadow) /> 
    <polygon points="31,20, 31,77, 80,50" fill="white"/> 
</svg> 
</div>