Как вырезать картинку по форме контура SVG

Question

Как наложить картинку на свг не стандартной формы. Что я имею ввиду есть вот такая СВГ

<svg xmlns="http://www.w3.org/2000/svg" width="308" height="308" viewBox="0 0 308 308" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M308 2C308 0.895431 307.105 0 306 0H2C0.895431 0 0 0.895431 0 2V100.667C0 101.771 0.898671 102.663 2.00243 102.705C29.4249 103.757 51.3333 126.32 51.3333 154C51.3333 181.68 29.4249 204.243 2.00243 205.295C0.898673 205.337 0 206.229 0 207.333V306C0 307.105 0.895431 308 2 308H306C307.105 308 308 307.105 308 306V2Z" fill="#FF0000"/>
</svg>

Как наложить картинку поверх этого свг так, чтобы вырез так же остался на картинке? То-есть по сути как в редакторах изображения наложение на любую форму картинки создание маски.

Answer 1

Если я правильно понял, не положить картинку сверху свг а как бы вложить внутрь свг, можно вот так попробовать сделать

<svg id="test" data-name="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="308" height="308" viewBox="0 0 308 308">
  <defs>
    <style>
      .cls-1 {
        fill: none;
      }

      .cls-2 {
        clip-path: url(#test-path);
      }
    </style>
    <clipPath id="test-path">
      <path class="cls-1" d="M308 2C308 0.895431 307.105 0 306 0H2C0.895431 0 0 0.895431 0 2V100.667C0 101.771 0.898671 102.663 2.00243 102.705C29.4249 103.757 51.3333 126.32 51.3333 154C51.3333 181.68 29.4249 204.243 2.00243 205.295C0.898673 205.337 0 206.229 0 207.333V306C0 307.105 0.895431 308 2 308H306C307.105 308 308 307.105 308 306V2Z" />
    </clipPath>
  </defs>
  <title>Test</title>
  <g class="cls-2">
    <image width="410" height="308"  xlink:href="https://klike.net/uploads/posts/2019-05/1556708032_1.jpg"/>
  </g>
</svg>

Answer 2

То-есть по сути как в редакторах изображения наложение на любую форму картинки создание маски.

Вместо clipPath, которые обрезает картинку по контурам svg, можно использовать svg маску, которая при fill="white" тоже работает, как clipPath, - обрезает изображение.

<svg id="test" data-name="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="300" viewBox="0 0 300 300">
  <defs>
   
    <mask id="test-path">
      <path fill="white"  d="M308 2C308 0.895431 307.105 0 306 0H2C0.895431 0 0 0.895431 0 2V100.667C0 101.771 0.898671 102.663 2.00243 102.705C29.4249 103.757 51.3333 126.32 51.3333 154C51.3333 181.68 29.4249 204.243 2.00243 205.295C0.898673 205.337 0 206.229 0 207.333V306C0 307.105 0.895431 308 2 308H306C307.105 308 308 307.105 308 306V2Z" />
    </mask>
  </defs>
  <title>Test</title>
  
    <image width="100%" height="100%" mask="url(#test-path)" 
              xlink:href="https://i.stack.imgur.com/iRI5i.jpg"/>
  </svg>

Но это решение с помощью маски более универсальное, так как можно получить более интересные эффекты. Например вырезание в картинке по форме path при fill="black"

Например, в качестве фона одна картинка:

Выше расположена другая картинка, к которой применена маска

<svg id="test" data-name="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="300" viewBox="0 0 300 300">
  <defs>
   
    <mask id="test-path">
      <rect fill="black" width="100%" height="100%" /> 
      <path fill="white"  class="cls-1" d="M308 2C308 0.895431 307.105 0 306 0H2C0.895431 0 0 0.895431 0 2V100.667C0 101.771 0.898671 102.663 2.00243 102.705C29.4249 103.757 51.3333 126.32 51.3333 154C51.3333 181.68 29.4249 204.243 2.00243 205.295C0.898673 205.337 0 206.229 0 207.333V306C0 307.105 0.895431 308 2 308H306C307.105 308 308 307.105 308 306V2Z" />
    </mask>
  </defs>
  <title>Test</title>
     <!-- Фон -->
  <image width="400" height="300"   
              xlink:href="https://i.stack.imgur.com/WgZki.png"/>
        <!-- Изображение, к которому применена маска    -->
   <image transform="translate(20)"  width="100%" height="100%" mask="url(#test-path)" 
              xlink:href="https://i.stack.imgur.com/iRI5i.jpg"/>
  </svg>

Анимация маски с помощью команды:

<animateTransform attributeName="transform" type="translate" 
  values="0;300;300;0" dur="8s" repeatCount="indefinite" />

<svg id="test" data-name="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="300" viewBox="0 0 300 300">
  <defs>
   
    <mask id="test-path">
      <rect fill="black" width="100%" height="100%" /> 
      <path fill="white"  class="cls-1" d="M308 2C308 0.895431 307.105 0 306 0H2C0.895431 0 0 0.895431 0 2V100.667C0 101.771 0.898671 102.663 2.00243 102.705C29.4249 103.757 51.3333 126.32 51.3333 154C51.3333 181.68 29.4249 204.243 2.00243 205.295C0.898673 205.337 0 206.229 0 207.333V306C0 307.105 0.895431 308 2 308H306C307.105 308 308 307.105 308 306V2Z" />
    </mask>
  </defs>
  <title>Test</title>
     <!-- Фон -->
  <image width="400" height="300"   
              xlink:href="https://i.stack.imgur.com/WgZki.png"/>
        <!-- Изображение, к которому применена маска    -->
   <image transform="translate(20)"  width="100%" height="100%" mask="url(#test-path)" 
              xlink:href="https://i.stack.imgur.com/iRI5i.jpg">
          <!-- Анимация маски -->
       <animateTransform attributeName="transform" type="translate" values="0;300;300;0" dur="8s" repeatCount="indefinite" />
   </image>           
  </svg>

БЛОГ НА HUSL

Как вырезать картинку по форме контура SVG

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