FrontEnd. Проблема с svg и растровой картинкой

Question

Всем добрый день, прорыл уже большое количество информации, но так и не понял как реализовать векторную картинку внутри 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>

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

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

Answer 1

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

Вырезал скриншот, обработал в фотошопе 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>

Answer 2

Вариант 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.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="0"
              y="2"
              width="315"
              height="400"
              href="https://i.stack.imgur.com/1wvO2.jpg" 
              mask="url(#msk)"
            /> 
          </svg>

БЛОГ НА HUSL

FrontEnd. Проблема с svg и растровой картинкой

Ответы (2 шт):

Вариант 2

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