Блог

Я хочу создать тень на прозрачном SVG-элементе.

Я пробовал использовать всевозможные фильтры, но безрезультатно. css3 фильтрует элемент svg ( filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210)); ), новый фильтр отбрасывания тени ( <feDropShadow> ), старые фильтры:

 <filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
      <feOffset dx="2" dy="2" result="offsetblur"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.2"/>
      </feComponentTransfer>
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  

Этого можно достичь с помощью css3 box-shadow
Codepen

Я ожидаю, что на прозрачном элементе будет отбрасываться тень, но фактический прозрачный элемент закрывает отбрасываемую тень (таким образом, сам элемент прозрачный, но имеет неоновое внешнее свечение)

Я хочу иметь возможность контролировать:

• размытие
• распространение
• Цвет

Будем признательны за любую помощь 🙂

Вы не можете этого сделать, если оригинал представляет собой полностью прозрачную фигуру — по ряду причин, — но вы можете сделать это, начиная с почти полностью прозрачной исходной формы и заканчивая полностью прозрачной фигурой, окруженной обычной отбрасываемой тенью.

Рисуйте свои фигуры с непрозрачностью заливки 1%. Когда вы помещаете их в фильтр, умножьте их альфа-значение на 100, используя colormatrix, и используйте это как основу для вашей отбрасываемой тени. В конечном итоге вы не будете использовать исходную фигуру непрозрачностью 1% в своей окончательной версии, потому что, если вы используете оператор «out», это приведет к удалению содержимого всего, что перекрывается с исходной (обработанной) фигурой.

 svg {
  background: #33D; 
}  

 <svg width="500px" height="400px">
<defs>
  <filter id="trans-shadow">
  <feColorMatrix type="matrix" values="1 0 0 0 0 
                                       0 1 0 0 0 
                                       0 0 1 0 0 
                                       0 0 0 100 0"
                                       result="boostedInput"/>
                                       
  <feGaussianBlur stdDeviation="5"/>
  <feComposite operator="out" in2="boostedInput"/>
  </filter>
</defs>


<circle filter="url(#trans-shadow)" x="100" y="100" r="050" cx="150" cy="150" fill="black" fill-opacity="0.01" />


</svg>  

Я предполагаю, что эти фигуры не всегда затенены, поэтому вы хотите, чтобы их версии без затенения были как можно более прозрачными. Если эти фигуры никогда не отображаются без отбрасываемой тени, вы можете пропустить шаг и просто изначально нарисовать эти фигуры черным цветом и по-прежнему использовать «out», чтобы отбросить их. Вот так:

 svg {
  background: #33D; 
}  

 <svg width="500px" height="400px">
<defs>
  <filter id="trans-shadow">                                          
  <feGaussianBlur stdDeviation="5"/>
  <feComposite operator="out" in2="SourceGraphic"/>
  </filter>
</defs>


<circle filter="url(#trans-shadow)" x="100" y="100" r="050" cx="150" cy="150" fill="black" />


</svg>  

Я создал для вас codepen, который может оказаться полезным Я сам с ним поиграл, и я думаю, что вы можете работать отсюда с тем, что хотите сами. вот html:

     <div id="background">
     <div id="mybox">
<svg viewBox="0 0 142.71 92.903" enable-background="new 0 0 142.71 92.903" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M141.348,91.677H1.71v-90h139.638v58
    c0,0,0,6.194,0,9S141.348,91.677,141.348,91.677z"/>
</svg>
  </div>
</div>
  

и css:

     #mybox{
  position: absolute;
  top: 20%;
  left: 40%;
}
svg{
box-shadow: 0 0 341px 71px rgb(137, 105, 148, 0.8);
width: 80%;
cursor: move;
}


#background {
  margin-left: 10%;
  max-width: 100%;
  height: 600px;
  background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1350amp;q=80');
  background-repeat: no-repeat;