Как сделать тень на прозрачном прямоугольном SVG - PullRequest
Новая
       61

Как сделать тень на прозрачном прямоугольном SVG

1 голос
/ 25 марта 2019

Я хочу, чтобы на прозрачном элементе SVG была тень.

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

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

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

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

Любая помощь будет оценена :) 1024 *

Ответы [ 2 ]

2 голосов
/ 26 марта 2019

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

Нарисуйте свои фигуры с непрозрачностью 1%.Когда вы вытягиваете их в фильтр, умножьте их альфа на 100, используя цветовую матрицу - и используйте это в качестве основы для вашей тени.Вы не будете использовать исходную форму непрозрачности 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>
1 голос
/ 25 марта 2019

Я сделал для вас кодовую ручку, которая может оказаться полезной Я сам поиграл с этим, и я думаю, что вы можете работать здесь с тем, что вы хотите сами.вот 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.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
  background-repeat: no-repeat;
...