CSS filter drop-shadow SVG polygon

214

17 июля 2021, 10:30

Я могу добавить тень кругу или квадрату.

Но возможно ли проделать тоже самое с полигонами?

<svg> 
  <defs> 
    <filter id="drop-shadow" width="150%" height="150%"> 
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/> 
      <feOffset in="blur" dx="2" dy="2" result="offsetBlur"/> 
      <feMerge> 
        <feMergeNode in="offsetBlur"/> 
        <feMergeNode in="SourceGraphic"/> 
      </feMerge> 
    </filter> 
  </defs> 
 
  <rect x="75" y="75" width="50" height="50" fill="cyan" 
        filter="url(#drop-shadow)"/> 
  <rect x="75" y="25" width="50" height="50" fill="gold" 
        filter="url(#drop-shadow)"/> 
  <rect x="25" y="75" width="50" height="50" fill="lime" 
        filter="url(#drop-shadow)"/> 
  <rect x="25" y="25" width="50" height="50" fill="red" 
        filter="url(#drop-shadow)"/> 
 
  <g filter="url(#drop-shadow)" transform="translate(150,0)"> 
    <rect x="75" y="75" width="50" height="50" fill="cyan"/> 
    <rect x="75" y="25" width="50" height="50" fill="gold"/> 
    <rect x="25" y="75" width="50" height="50" fill="lime"/> 
    <rect x="25" y="25" width="50" height="50" fill="red"/> 
  </g> 
</svg>

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> 
  <defs> 
    <filter id="shadow"> 
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/> 
    </filter> 
  </defs> 
 
  <circle cx="50%" cy="50%" r="4" 
      style="fill:pink; filter:url(#shadow);"/> 
</svg>

UPD: спасибо за помощь, разобрался.

<div> 
  <svg class="map-2up-2" viewBox="0 0 2000 1125" xmlns="http://www.w3.org/2000/svg"> 
      <polygon points="708,765,819,692,888,710,932,683,916,630,845,623,778,634,732,650,706,708" fill="#999" /> 
  </svg> 
</div>     
<div>     
  <svg class="map-2up-2" viewBox="0 0 2000 1125" xmlns="http://www.w3.org/2000/svg"> 
      <defs> 
          <filter id="map-2up-2" height="130%"> 
            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>  
            <feOffset dx="10" dy="10" result="offsetblur"/>  
            <feMerge>  
              <feMergeNode/> 
              <feMergeNode in="SourceGraphic"/>  
            </feMerge> 
          </filter> 
      </defs> 
      <polygon points="708,765,819,692,888,710,932,683,916,630,845,623,778,634,732,650,706,708" fill="#999" filter="url(#map-2up-2)" /> 
  </svg> 
</div>

Answer 1

<feOffset dx="1" dy="1" result="offsetblur"/>

Изменяя атрибуты dx, dy фильтра получите необходимую вам тень

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 200 200"> 
   <defs> 
    <filter id="dropshadow" height="130%"> 
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>  
      <feOffset dx="1" dy="1" result="offsetblur"/>  
      <feMerge>  
        <feMergeNode/> 
        <feMergeNode in="SourceGraphic"/>  
      </feMerge> 
    </filter> 
  </defs> 
  <polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056" fill="white" filter="url(#dropshadow)"/> 
</svg>

Пример применения тени на все фигуры, входящие в SVG.

Используется фильтр feColorMatrix.
Эта техника полезна, когда нужно получить тень любого цвета

Обычная тень серого или чёрного цвета:

<style> 
#mySVG { 
   filter: url(#selective-shadow); 
} 
 
.shadow { 
  fill: gold; 
} 
</style> 
<svg> 
 <defs> 
   <filter id="selective-shadow"> 
     <feColorMatrix type="matrix" values="0 0 0 0 0  
                                          0 0 0 0 0 
                                          0 0 0 0 0  
                                          0 0 0 2 -1"/> 
     <feGaussianBlur stdDeviation="3"/> 
     <feOffset dy="2" dx="2"/> 
     <feMerge> 
       <feMergeNode/> 
       <feMergeNode in="SourceGraphic"/> 
     </feMerge>          
   </filter> 
 </defs> 
</svg> 
 
 
 
<svg height="150" width="150" id="mySVG"> 
    <g> 
<path d="M0,0 C-72,132 -72,-26 100,100"></path> 
    </g> 
    <g class="shadow" > 
    <circle class="shadow" cx="100" cy="100" r="20"></circle> 
    </g> 
  </svg>

Обратите внимание на последнюю, результирующую колонку feColorMatrix Это каналы R | G | B, заменяя 0 на единицу получим соответствующий цвет тени:

Красная тень

<style> 
#mySVG { 
   filter: url(#selective-shadow); 
} 
 
.shadow { 
  fill: gold; 
} 
</style> 
<svg> 
 <defs> 
   <filter id="selective-shadow"> 
     <feColorMatrix type="matrix" values="0 0 0 0 1  
                                          0 0 0 0 0 
                                          0 0 0 0 0  
                                          0 0 0 2 -1"/> 
     <feGaussianBlur stdDeviation="3"/> 
     <feOffset dy="2" dx="2"/> 
     <feMerge> 
       <feMergeNode/> 
       <feMergeNode in="SourceGraphic"/> 
     </feMerge>          
   </filter> 
 </defs> 
</svg> 
 
<svg height="150" width="150" id="mySVG"> 
    <g> 
<path d="M0,0 C-72,132 -72,-26 100,100"></path> 
    </g> 
    <g class="shadow" > 
    <circle class="shadow" cx="100" cy="100" r="20"></circle> 
    </g> 
  </svg>

Зелёная тень

<style> 
#mySVG { 
   filter: url(#selective-shadow); 
} 
 
.shadow { 
  fill: gold; 
} 
</style> 
<svg> 
 <defs> 
   <filter id="selective-shadow"> 
     <feColorMatrix type="matrix" values="0 0 0 0 0  
                                          0 0 0 0 1 
                                          0 0 0 0 0  
                                          0 0 0 2 -1"/> 
     <feGaussianBlur stdDeviation="3"/> 
     <feOffset dy="2" dx="2"/> 
     <feMerge> 
       <feMergeNode/> 
       <feMergeNode in="SourceGraphic"/> 
     </feMerge>          
   </filter> 
 </defs> 
</svg> 
 
<svg height="150" width="150" id="mySVG"> 
    <g> 
<path d="M0,0 C-72,132 -72,-26 100,100"></path> 
    </g> 
    <g class="shadow" > 
    <circle class="shadow" cx="100" cy="100" r="20"></circle> 
    </g> 
  </svg>

Синяя тень

<style> 
#mySVG { 
   filter: url(#selective-shadow); 
} 
 
.shadow { 
  fill: gold; 
} 
</style> 
<svg> 
 <defs> 
   <filter id="selective-shadow"> 
     <feColorMatrix type="matrix" values="0 0 0 0 0  
                                          0 0 0 0 0 
                                          0 0 0 0 1  
                                          0 0 0 2 -1"/> 
     <feGaussianBlur stdDeviation="3"/> 
     <feOffset dy="2" dx="2"/> 
     <feMerge> 
       <feMergeNode/> 
       <feMergeNode in="SourceGraphic"/> 
     </feMerge>          
   </filter> 
 </defs> 
</svg> 
 
<svg height="150" width="150" id="mySVG"> 
    <g> 
<path d="M0,0 C-72,132 -72,-26 100,100"></path> 
    </g> 
    <g class="shadow" > 
    <circle class="shadow" cx="100" cy="100" r="20"></circle> 
    </g> 
  </svg>