4

Всем добрый день, прорыл уже большое количество информации, но так и не понял как реализовать векторную картинку внутри svg.

У меня есть svg:

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

И есть фото. Нужно фото вставить в этот svg, чтоб получилось так

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

Вот код самой svg

<svg
            width="320"
            height="417"
            viewBox="0 0 420 517"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="xMinYMin slice"
          >
            <g filter="url(#filter0_d_134:4567)">
              <path
                d="M310.73 327.763L246.33 48.6385C236.249 4.94706 184.554 -13.9259 148.694 12.9938L73.2363 69.6404C61.6944 78.305 53.5368 90.7246 50.1696 104.759L2.24474 304.505C-6.40178 340.543 18.2907 376.067 55.0828 380.521L242.866 403.253C285.54 408.418 320.394 369.648 310.73 327.763Z"
                fill="#C4C4C4"
              />
            </g>
            <defs>
              <filter
                id="filter0_d_134:4567"
                x="0.513184"
                y="0.530029"
                width="318.84"
                height="416.187"
                filterUnits="userSpaceOnUse"
                color-interpolation-filters="sRGB"
              >
                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                <feColorMatrix
                  in="SourceAlpha"
                  type="matrix"
                  values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                  result="hardAlpha"
                />
                <feOffset dx="7" dy="13" />
                <feComposite in2="hardAlpha" operator="out" />
                <feColorMatrix
                  type="matrix"
                  values="0 0 0 0 0.976471 0 0 0 0 0.811765 0 0 0 0 0.270588 0 0 0 1 0"
                />
                <feBlend
                  mode="normal"
                  in2="BackgroundImageFix"
                  result="effect1_dropShadow_134:4567"
                />
                <feBlend
                  mode="normal"
                  in="SourceGraphic"
                  in2="effect1_dropShadow_134:4567"
                  result="shape"
                />
              </filter>
            </defs>
            <image
              x="0"
              y="0"
              width="100%"
              height="100%"
              href="img/peopleStock.jpg"
            />
          </svg>

В итоге у меня получается такое

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

Помогите, пожалуйста, уже голову сломал, не знаю как это сделать. Заранее всем спасибо!

3
  • 1
    Может и изображение тогда предоставите для работы?
    – Leonid
    12 ноя 2021 в 14:22
  • 2
    @Leonid: а зачем? Взломайте комп автора вопроса, доберитесь до нужной директории и файла. "Без труда, не вытащишь и рыбку из пруда" :)
    – UModeL
    12 ноя 2021 в 14:24
  • 1
    @Alexandr_TT: ужЕ - seduzione-rapida.com/images/ragazza-rimorchiare-strada-01.jpg
    – UModeL
    12 ноя 2021 в 14:37

2 ответа 2

8

Конечно лучше сразу давать конкретную картинку, чтобы не отнимать у отвечающих лишнего времени.

Вырезал скриншот, обработал в фотошопе 300x300px, чтобы легче было позиционировать растянуть на всю рамку без свободных полей.

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

Решение заключается в применении маски к изображению.

<style>
.container {
width:36vw;
height:50vw;
}
</style>
<div class="container">
<svg
           
            viewBox="-50 0 412 412"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            style="background:#E5E5E5"
            
          >  
           <defs>
             <mask id="msk">
               <path fill="white"
                d="M310.73 327.763L246.33 48.6385C236.249 4.94706 184.554 -13.9259 148.694 12.9938L73.2363 69.6404C61.6944 78.305 53.5368 90.7246 50.1696 104.759L2.24474 304.505C-6.40178 340.543 18.2907 376.067 55.0828 380.521L242.866 403.253C285.54 408.418 320.394 369.648 310.73 327.763Z" />
             </mask>
           </defs>
            <g filter="url(#filter0_d_134)">
              <path id="path"
                d="M310.73 327.763L246.33 48.6385C236.249 4.94706 184.554 -13.9259 148.694 12.9938L73.2363 69.6404C61.6944 78.305 53.5368 90.7246 50.1696 104.759L2.24474 304.505C-6.40178 340.543 18.2907 376.067 55.0828 380.521L242.866 403.253C285.54 408.418 320.394 369.648 310.73 327.763Z"
                fill="#C4C4C4"
              />
            </g>
            <defs>
              <filter
                id="filter0_d_134"
                x="0.513184"
                y="0.530029"
                width="318.84"
                height="416.187"
                filterUnits="userSpaceOnUse"
                color-interpolation-filters="sRGB"
              >
                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                <feColorMatrix
                  in="SourceAlpha"
                  type="matrix"
                  values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                  result="hardAlpha"
                />
                <feOffset dx="7" dy="13" />
                <feComposite in2="hardAlpha" operator="out" />
                <feColorMatrix
                  type="matrix"
                  values="0 0 0 0 0.976471 0 0 0 0 0.811765 0 0 0 0 0.270588 0 0 0 1 0"
                />
                <feBlend
                  mode="normal"
                  in2="BackgroundImageFix"
                  result="effect1_dropShadow_134"
                />
                <feBlend
                  mode="normal"
                  in="SourceGraphic"
                  in2="effect1_dropShadow_134"
                  result="shape"
                />
              </filter>
            </defs>
            <image
              x="3"
              y="15"
              width="300"
              height="388"
              href="https://i.stack.imgur.com/C0qTU.png" 
              mask="url(#msk)"
            />
          </svg> 
    </div>   

8
  • У меня как-то грызано все по обеим сторонам от желтого (?) контура. Да и код как-то сложно выглядит. Вроде одна и та же фигура, сначала заливается желтым, потом сместить и использовать как путь обрезки изображения. Нет?
    – Leonid
    12 ноя 2021 в 15:15
  • @Leonid Первый раз path применяется для того чтобы фильтрами получить желтую полосу, второй раз path используется в маске, чтобы обрезать изображение. Пришли скрин, чтобы мне было понятно, как у тебя выглядит. да и имена фильтров недопустимый символ имеют двоеточие, но как-то работает же == загадка 12 ноя 2021 в 15:19
  • yadi.sk/i/fgCGC5xrzEcExg открыт доступ к диску...)) Во всех четырех браузерах ровно одинаково.
    – Leonid
    12 ноя 2021 в 15:21
  • @Leonid забрал, сейчас поколдую немного 12 ноя 2021 в 15:23
  • Спасибо большое) Очень сильно выручили) 12 ноя 2021 в 15:42
4

Вариант 2

Дублирование контуров и тень при наведении.

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

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

<g transform="translate(8 14)">

При наведении работает CSS фильтр: filter: drop-shadow(8px 8px 8px #6B591E);

<style> 
 #svg1:hover  #path2 {
  filter: drop-shadow(8px 8px 8px #6B591E);
}
</style>
<svg        id="svg1"
            width="320"
            height="417"
            viewBox="-50 0 412 412"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            style="background:#E5E5E5"
            
          >  
           <defs>
             <mask id="msk">
               <path fill="white"
                d="M310.73 327.763L246.33 48.6385C236.249 4.94706 184.554 -13.9259 148.694 12.9938L73.2363 69.6404C61.6944 78.305 53.5368 90.7246 50.1696 104.759L2.24474 304.505C-6.40178 340.543 18.2907 376.067 55.0828 380.521L242.866 403.253C285.54 408.418 320.394 369.648 310.73 327.763Z" />
             </mask>
           </defs>
            
               <g transform="translate(8 14)">
            <path id="path2"
                d="M310.73 327.763L246.33 48.6385C236.249 4.94706 184.554 -13.9259 148.694 12.9938L73.2363 69.6404C61.6944 78.305 53.5368 90.7246 50.1696 104.759L2.24474 304.505C-6.40178 340.543 18.2907 376.067 55.0828 380.521L242.866 403.253C285.54 408.418 320.394 369.648 310.73 327.763Z"
                fill="#F9CF45"
              />
             </g> 
              
              <path id="path"
                d="M310.73 327.763L246.33 48.6385C236.249 4.94706 184.554 -13.9259 148.694 12.9938L73.2363 69.6404C61.6944 78.305 53.5368 90.7246 50.1696 104.759L2.24474 304.505C-6.40178 340.543 18.2907 376.067 55.0828 380.521L242.866 403.253C285.54 408.418 320.394 369.648 310.73 327.763Z"
                fill="#C4C4C4"
              />
           
           
            <image id="img1"
              x="2"
              y="15"
              width="300"
              height="388"
              href="https://i.stack.imgur.com/C0qTU.png" 
              mask="url(#msk)"
            /> 
          </svg>

Другая картинка

<style> 
 #svg1:hover  #path2 {
  filter: drop-shadow(6px 6px 8px #6B591E);
}
</style>
<svg        id="svg1"
            width="320"
            height="417"
            viewBox="-50 0 412 412"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            style="background:#E5E5E5"
            
          >  
           <defs>
             <mask id="msk">
               <path fill="white" 
                d="M310.7 327.8 246.3 48.6A62 62 0 0 0 148.7 13L73.2 69.6a62 62 0 0 0-23 35.2l-48 199.7a62 62 0 0 0 52.9 76l187.8 22.8a62 62 0 0 0 67.8-75.5Z" />
             </mask>
           </defs>
            
               <g transform="translate(8 14)">
            <path id="path2"
                d="M310.7 327.8 246.3 48.6A62 62 0 0 0 148.7 13L73.2 69.6a62 62 0 0 0-23 35.2l-48 199.7a62 62 0 0 0 52.9 76l187.8 22.8a62 62 0 0 0 67.8-75.5Z"
                fill="#F9CF45" 
              />
             </g> 
              
              <path id="path"
                d="M310.7 327.8 246.3 48.6A62 62 0 0 0 148.7 13L73.2 69.6a62 62 0 0 0-23 35.2l-48 199.7a62 62 0 0 0 52.9 76l187.8 22.8a62 62 0 0 0 67.8-75.5Z"
                fill="#C4C4C4" 
              />
           
           
            <image id="img1"
              x="0"
              y="2"
              width="315"
              height="400"
              href="https://i.stack.imgur.com/1wvO2.jpg" 
              mask="url(#msk)"
            /> 
          </svg>

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

5
  • 1
    Ну кто еще мог ответить, если не ты??? ))) Привет. Сто лет, сто зим...
    – Air
    12 ноя 2021 в 19:00
  • @Air Спасибо Норик. Эx.. забросил ты SVG. С ностальгией вспоминаю славные времена, когда был ты, Артур и другие ребята. Как дела с заказчиками? 12 ноя 2021 в 19:11
  • Нормально с заказчиками. Я тоже вспоминаю... )))
    – Air
    12 ноя 2021 в 19:15
  • 1
    Ну вот, совсем другое дело!
    – Leonid
    12 ноя 2021 в 19:42
  • @Григорий Иванченко Выберите ответ один из двух и если он был полезен, отметьте его галочкой (ниже серого треугольника у ответа) 14 ноя 2021 в 8:41

Ваш ответ

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

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