2

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

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

<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> 

1
  • Конечно можно. Код полигона добавьте в вопрос и я попробую сделать. 9 сен 2019 в 14:56

1 ответ 1

2

<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>

2
  • Скажите, какой параметр меняет цвет тени? 10 сен 2019 в 7:34
  • 1
    @Andrey Grek в последней колонке фильтра feColorMatrix 0 заменяем на 1 сверху в колонке первая цифра - красный цвет , вторая зелёный, третья - синий Схема RGB/ Это описание есть в ответе 10 сен 2019 в 7:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.