Тень скрыта за пределами элемента SVG - PullRequest
Новая
       9

Тень скрыта за пределами элемента SVG

0 голосов
/ 14 февраля 2019

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

Я могу только описать на CSS, что я имею в виду (на SVG я пока не знаю, как): box-shadow: 0 3px 16px 5px rgba(0,0,0,.3);

Проблема: 

<svg height="0">
<filter id="drop-shadow-path-line" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="-20" dy="20" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</svg>

<svg height="200" width="200">
  
  <g transform="translate(25 25)">
    <rect x="0" y="0" width="100" height="100" fill="orange" filter="url(#drop-shadow-path-line)" />
  <g>

<svg>

Потребность: 

#exmaple-svg{
   position:relative;
   top:25px;
   left:25px;

}

.item{
  position: absolute;
  left: 20px;
  top: 20px;
  width:100px;
  height:100px;
  background-color: rgba(255,0,0,.5);
  filter:drop-shadow(0 4px 15px #000);
}
<div id="exmaple-svg">
   <div class="item"><div>
</div>

PS: Спасибо за любую помощь и Ваше время.

Я видел много решений, и я напишузаранее тень не нужно применять ко всем элементам, если у вас та же ситуация, и вам нужно применить тень для всех дочерних элементов, которые она использует, с помощью CSS, добавив: filter:drop-shadow(0 3px 15px #000) в корневой элемент SVG

Обновлено: для @ enxaneta (ошибка с <path />) - тень обрезается в зависимости от расположения контрольной точки p2y (кривая Безье).Все еще ищу решение ... чтобы оно не было обрезано. 

<svg viewBox="100 50 250 250">

<path d="M136.8595428466797 123.9515609741211 C 181.78643913269042 123.9515609741211 158.49101142883302 131.44540405273438 203.41790771484375 131.44540405273438" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>

    <path d="M136.8595428466797 123.9515609741211 C 179.60736618041992 123.9515609741211 157.44182815551758 124.271484375 200.1896514892578 124.271484375" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>

    <path d="M136.8595428466797 123.9515609741211 C 176.21768913269042 123.9515609741211 155.809761428833 53.60844039916992 195.16790771484375 53.60844039916992" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
    
    <path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 119.24974060058594 202.7005157470703 119.24974060058594" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
  
  
  <path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 102.39105224609375 202.7005157470703 102.39105224609375" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
  
  
  <path d="M133.2725830078125 154.7993927001953 C 181.83128128051757 154.7993927001953 156.6526969909668 170.1845245361328 205.21139526367188 170.1845245361328" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
  
  <filter id="drop-shadow-path-line"  width="200%" height="200%">

<feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</svg>

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Я не смог туда добраться и не смог получить указанный 5px спред.Размещать здесь, потому что это все еще может быть полезно. 

div { /* just so we can see what the css version would look like */
background:orange;
width:100px;
height:100px;
box-shadow: 0 4px 15px 5px rgba(0,0,0,.3);
}
<svg height="0">
<filter id="dropShadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="15" />
    <feOffset dx="0" dy="3" />
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.4"/>
    </feComponentTransfer>
    <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</svg>

<svg height="200" width="200" filter="url(#dropShadow)">
  <g transform="translate(50 50)" >
    <rect x="0" y="0" width="100" height="100" fill="orange" />
  <g>
<svg>

<div></div>

PS Вы можете использовать этот Codepen Майкла Маллани для создания теней SVG.

0 голосов
/ 14 февраля 2019

Переопределите размер фильтра и удалите смещение (feOffset)

Значение по умолчанию для атрибута x для <filter> составляет -10%.Установив 0, вы обрезаете часть изображения.Не рекомендуется использовать атрибуты x и y. 

<svg height="0">
<filter id="drop-shadow-path-line"  width="200%" height="200%">

<feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>


</svg>

<svg height="200" width="200">
  
  <g transform="translate(25 25)">
    <rect x="0" y="0" width="100" height="100" fill="orange" filter="url(#drop-shadow-path-line)" />
  <g>

<svg>

Надеюсь, это то, что вам нужно.

ОБНОВЛЕНИЕ

ОП обновил свой вопрос, добавив новый путь.

Для ясности я упростил svg.Решение в этом случае подразумевает помещение всех путей в элемент <g> и применение фильтра к группе.Также я использую filterUnits ="userSpaceOnUse" для фильтра. 

svg {
  border: 1px solid;
}

path {
  stroke-width: 2;
  stroke: rgb(178, 34, 34);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
g{
  filter:url(#drop-shadow-path-line);
}
<svg viewBox="100 50 250 250">
<defs> 
<filter id="drop-shadow-path-line" filterUnits ="userSpaceOnUse" >
<feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="3"  />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>  
    <path d="M136.8595428466797 123.9515609741211 C 181.78643913269042 123.9515609741211 158.49101142883302 131.44540405273438 203.41790771484375 131.44540405273438" sclass="active" ></path>

    <path d="M136.8595428466797 123.9515609741211 C 179.60736618041992 123.9515609741211 157.44182815551758 124.271484375 200.1896514892578 124.271484375"   class="active" ></path>

    <path d="M136.8595428466797 123.9515609741211 C 176.21768913269042 123.9515609741211 155.809761428833 53.60844039916992 195.16790771484375 53.60844039916992"  class="active" ></path>
    
    <path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 119.24974060058594 202.7005157470703 119.24974060058594"  class="active" ></path>
  
  
  <path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 102.39105224609375 202.7005157470703 102.39105224609375"  class="active" ></path>
  
  
  <path d="M133.2725830078125 154.7993927001953 C 181.83128128051757 154.7993927001953 156.6526969909668 170.1845245361328 205.21139526367188 170.1845245361328" class="active" ></path>

  </g>

</svg>
...