4

Не могу нормально разобраться с path (SVG). Может кто помочь сделать такую вот вроде бы "несложную" штуку? Был бы чрезмерно благодарен, или дайте наводку.
Можно сделать и без плавных кривых, просто срез.
Опять же, я был бы очень признателен, это только просьба.
Ширина примерно на 50px. ViewBox=" 0 0 50 50"

И как лучше такой штуке задать тень?

штука

4
  • 1
    Это вы всмысле собрались вручную её написать ? Похвально конечно, но лучше не майтесь дурью, поставьте inkscape (или illustrator, если не против пиратсва) и нарисуйте фигуру там.
    – Hikikomori
    20 июл 2018 в 11:03
  • 1
    @Hikikomori, кривые Безье можно и вручную=) (может даже несколько быстрее)
    – Arthur
    20 июл 2018 в 11:04
  • 2
    @Arthur Это если знаешь, что и как делать, а это явно не случай автора
    – Hikikomori
    20 июл 2018 в 11:06
  • 3
    Даже ставить ничего не нужно, много онлайн тулз: janvas.com/v6.1/janvas_app_6.1_public/index.html
    – ferrari
    20 июл 2018 в 11:49

2 ответа 2

8

Ответ будет подробный для начинающих изучать SVG.

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

Техника получения path по заданной картинке

  • Пишем код svg для добавления вашей картинки в векторный редактор. Картинка имеет размеры 380x50 px

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="380" height="50" viewBox="0 0 380 50" >  

<image xlink:href="https://i.stack.imgur.com/Q7DqM.png" width="380" height="50" />
</svg>	 

  • В векторном редакторе с помощью инструмента -"Добавлять кривые Безье" (на рисунке цифра 1) - наносим по границам рисунка узловые точки

    При необходимости корректируем положение узловых точек (инструмент 2) перетаскиванием и форму кривых изменяем рычагами узловых точек.

введите сюда описание изображения

  • Сохраняем файл в векторном редакторе в формате SVG. Из этого файла нам нужна только формула патча. Копируем её в рабочий файл.
  • Дорабатываем стили - убираем обводку и добавляем цвет

    style="fill:#F44D3D;stroke:none"

Фигура SVG готова:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="380" height="50" viewBox="0 0 380 50" preserveAspectRatio="xMinYMin meet"> 

<path  d="M3.5 9.8 377.8 8.9l-66.4 33.6-6.1 1.7-8.3 1.7-8.7 1.3c0 0-147.8 0.7-221.9 0-2.6 0-4.2-0.5-7.6-1.9-3.3-1.3-4.4-1.8-6.4-2.9C35.3 33 3.5 9.8 3.5 9.8Z" style="fill:#F44D3D;stroke:none"/>

</svg>

Делаем фигуру SVG полностью адаптивной

Для этого заменяем для ширины и высоты пользовательского окна просмотра пиксели на проценты. Для того, чтобы фигура знимала весь экран браузера присваивается width="100%" height="100%"
Для размеров, как у автора вопроса width="25%" height="25%"

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="25%" height="25%" viewBox="0 0 380 50" preserveAspectRatio="xMinYMin meet"> 

<path  d="M3.5 9.8 377.8 8.9l-66.4 33.6-6.1 1.7-8.3 1.7-8.7 1.3c0 0-147.8 0.7-221.9 0-2.6 0-4.2-0.5-7.6-1.9-3.3-1.3-4.4-1.8-6.4-2.9C35.3 33 3.5 9.8 3.5 9.8Z" style="fill:#F44D3D;stroke:none"/>

</svg>

6

Добавление тени CSS

.container {
filter:drop-shadow(2px 4px 3px black);
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="25%" height="25%" viewBox="0 0 380 50" preserveAspectRatio="xMinYMin meet"> 

<path id="shadow"   d="M3.5 9.8 377.8 8.9l-66.4 33.6-6.1 1.7-8.3 1.7-8.7 1.3c0 0-147.8 0.7-221.9 0-2.6 0-4.2-0.5-7.6-1.9-3.3-1.3-4.4-1.8-6.4-2.9C35.3 33 3.5 9.8 3.5 9.8Z" style="fill:#F44D3D;stroke:none"/>
</svg>
</div>  

Добавление тени SVG

Код немного сложнее варианта CSS, но выглядит тень SVG более реалистично и имеет несколько возможностей для регулировки внешнего вида.

  • Делаем копию патча основной фигуры и сдвигаем копию влево и вниз на несколько пикселей:

<path id="pathCopy" transform="translate(2 2)" d="M3.5 9.8 377.8 8.9l-66.4 33.6-6.1 1.7-8.3 1.7-8.7 1.3c0 0-147.8 0.7-221.9 0-2.6 0-4.2-0.5-7.6-1.9-3.3-1.3-4.4-1.8-6.4-2.9C35.3 33 3.5 9.8 3.5 9.8Z" style="fill:white;stroke:none"/>

  • Применяем к копии патча, которая расположена ниже основного патча фигуры фильтр размытия Гаусса:

#pathCopy {
filter:url(#shadow);
}
<div class="container">
<svg id="mySvg" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="50%" height="50%" viewBox="0 0 380 50" preserveAspectRatio="xMinYMin meet"> 
<defs>
  <filter id="shadow" x="-10%" y="10%" height="140%" width="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
 </defs>
 <path id="pathCopy" transform="translate(2 2)"  d="M3.5 9.8 377.8 8.9l-66.4 33.6-6.1 1.7-8.3 1.7-8.7 1.3c0 0-147.8 0.7-221.9 0-2.6 0-4.2-0.5-7.6-1.9-3.3-1.3-4.4-1.8-6.4-2.9C35.3 33 3.5 9.8 3.5 9.8Z" style="fill:white;stroke:none"/>
<path id="path1"   d="M3.5 9.8 377.8 8.9l-66.4 33.6-6.1 1.7-8.3 1.7-8.7 1.3c0 0-147.8 0.7-221.9 0-2.6 0-4.2-0.5-7.6-1.9-3.3-1.3-4.4-1.8-6.4-2.9C35.3 33 3.5 9.8 3.5 9.8Z" style="fill:#F44D3D;stroke:none"/>
</svg>
</div>

SVG filter feDropShadow

#path1 {
filter:url(#shadow); 
fill:#F44D3D;
stroke:none;
}
<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="50%" height="50%" viewBox="0 0 380 50" preserveAspectRatio="xMidYMid meet" > 

 <defs>
        <filter id="shadow" x="-20%" y="-10%" width="160%" height="160%">
            <feDropShadow dx="2" dy="2" stdDeviation="3"/>
        </filter>
 </defs>

<path id="path1"   d="M3.5 9.8 377.8 8.9l-66.4 33.6-6.1 1.7-8.3 1.7-8.7 1.3c0 0-147.8 0.7-221.9 0-2.6 0-4.2-0.5-7.6-1.9-3.3-1.3-4.4-1.8-6.4-2.9C35.3 33 3.5 9.8 3.5 9.8Z" />
</svg>
</div>

Update

Сниппет искажает (подрезает снизу) тень. В браузерах этого не наблюдается

Для регулировки внешнего вида тени по своему вкусу используйте атрибуты фильтра - dx="2" dy="2" stdDeviation="3"

Ваш ответ

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

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