5

Добрый день, импортирую svg из Adobe Illustrator. Изображение стрелки имеет такой код.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="30.728px" height="40.728px" viewBox="0 0 12.728 22.728" enable-background="new 0 0 12.728 22.728" xml:space="preserve">
<path fill="#c1c1c1" fill-rule="evenodd" clip-rule="evenodd" d="M12.728,11.414L1.414,22.728L0,21.314l9.95-9.95L0,1.414L1.414,0l11.314,11.314
  l-0.05,0.05L12.728,11.414z"/>
</svg>

Подскажите как тут добавить тень.

Так выглядит фигура:

1
  • 2
    Конечно, спасибо вам, я уже и забыл)
    – Dan
    22 дек 2019 в 7:35

2 ответа 2

7

Вариант с использованием двойной стрелки и применением размытия тени.

  • В качестве тени выступает вторая стрелка, которая находится под первой и сдвигается относительно первой вниз и влево с помощью команды SVG

    transform="translate(-0.5 2.5)"

  • Размытие тени с помощью фильтра Гаусса

    <filter id="shadow" height="120%"> <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>

  • Раз автор выбрал SVG, то изображение лучше сделать масштабируемым для этого viewport в процентах

    width="25%" height="25%"

Можно легко изменить размеры стрелки, меняя проценты, но при этом стрелка всегда будет масштабируемой.

<svg width="25%" height="25%" viewBox="0 0 30 40"> 
<defs>
  <filter id="shadow" height="120%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
  </filter>
</defs>
  <polyline transform="translate(-0.5 2.5)" filter="url(#shadow)" points="5,5 25,20 5,35" stroke="grey" stroke-width="1" fill="none"/>
  <polyline points="5,5 25,20 5,35" stroke="grey" stroke-width="2" fill="none"  />
</svg>

2
  • Alexandr_TT, ты тут?
    – Air
    22 дек 2019 в 6:33
  • @Air Привет, если есть вопрос в чат зайди 22 дек 2019 в 6:39
5

В SVG можно добавить тень с помощью SVG-фильтров:

Сначала опишем фильтр в специальном разделе defs:

  <defs>
      //начало описания фильтра
    <filter id="myfilter" x="0" y="0" width="200%" height="200%">
      // Взять прозрачность объекта и сместить на 2px вниз и вправо
      <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
      // Затем размыть силой 2
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
      //  и совместить с исходным изображением:
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>

Затем у объекта укажем, что мы хотим использовать этот фильтр:

<path .... filter="url(#myfilter)" .... />

Фильтр будет обрезан по краю SVG. Поэтому я добавил немного поля снизу и справа:

<svg ... viewBox="0 0 18 30">

<svg width="35" viewBox="0 0 18 30">
  <defs>
    <filter id="myfilter" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
<path fill="#c1c1c1" fill-rule="evenodd" filter="url(#myfilter)" clip-rule="evenodd" d="M12.728,11.414L1.414,22.728L0,21.314l9.95-9.95L0,1.414L1.414,0l11.314,11.314
  l-0.05,0.05L12.728,11.414z"/>
</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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