Выпуклая картинка

Question

Как реализовать такую форму обрезки изображения у тега <img> без использования after/before?

Резидент Казахстана · Answer 1 · 2019-07-03T05:09:01.730

Можно на css clip-path

Можно и на svg clip-path, снизу пример

<svg viewBox="0 0 149 75" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
      <clipPath id="clipPath">
       <path d="m2.5731133 296.75323c-4.59609-31.62533 1.44753-54.53056 10.76422-74.75323h128.54044c4.45956 1.01485 9.44931 1.355 8.56937 9.16466l0.55286 59.43142c-1.89632 3.33489-3.79485 6.66705-8.56936 6.38747z"/>
      </clipPath>
   </defs>
     <g transform="translate(-1,-222)">
      <image y="222" width="150" height="75"
             clip-path="url(#clipPath)"
             image-rendering="optimizeQuality" 
             preserveAspectRatio="none" 
             xlink:href="https://exklyziv.ru/wp-content/uploads/2017/12/Tailande.jpg"/>
     </g>
  </svg>

Дальше обернуть svg в div и стилизовать уже это div — Резидент Казахстана, Jul 03 '19 at 05:53

Alexandr_TT · Answer 2 · 2019-07-03T17:02:55.447

SVG Mask

Решения с помощью mask более богаты своими возможностями:

Примеры применения масок svg

1. Вариант

Маска работает в режиме clip-path.

<mask id="msk1">
<path fill="white" />
</mask>

То есть зона изображения, которую перекрывает path становится прозрачной

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="1200" height="800" viewBox="0 0 1200 800" preserveAspectRatio="xMinYMin meet"  >  
   <defs>
      <mask id="msk1">
    <rect width="100%" height="100%" fill="black"/>
       <path fill="white" d="m 31.160638,11.39617 c 0,0 -17.690496,334.70985 -15.580319,502.16566 1.164647,92.42211 15.580319,276.85028 15.580319,276.85028 l 1112.195062,0 c 30.539,0 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -25.1895,-49.1946433 -51.5349,-49.1379254 z">
   </path>   
      </mask>
   </defs>
<image xlink:href="https://i.stack.imgur.com/9annC.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>

2. Добавляем полупрозрачный бордер к вырезанному изображению

<path fill="white" stroke="red" stroke-width="15" .../>

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="1200" height="800" viewBox="0 0 1200 800" preserveAspectRatio="xMinYMin meet"  >  
   <defs>
      <mask id="msk1">
    <rect width="100%" height="100%" fill="black"/>
       <path fill="white" stroke="red" stroke-width="15" d="m 31.160638,11.39617 c 0,0 -17.690496,334.70985 -15.580319,502.16566 1.164647,92.42211 15.580319,276.85028 15.580319,276.85028 l 1112.195062,0 c 30.539,0 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -25.1895,-49.1946433 -51.5349,-49.1379254 z">
   </path>   
      </mask>
   </defs>
<image xlink:href="https://i.stack.imgur.com/9annC.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>

Варианты анимации маски

1. Анимация формы вырезаемого изображения без бордюра

Анимируется атрибут d path- задается начальное и конечное положение

Анимация начинается по клику на изображении:

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="1200" height="800" viewBox="0 0 1200 800" preserveAspectRatio="xMinYMin meet"  >  
   <defs>
      <mask id="msk1">
    <rect width="100%" height="100%" fill="black"/>
       <path fill="white" d="m 31.160638,11.39617 c 0,0 -17.690496,334.70985 -15.580319,502.16566 1.164647,92.42211 15.580319,276.85028 15.580319,276.85028 l 1112.195062,0 c 30.539,0 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -25.1895,-49.1946433 -51.5349,-49.1379254 z">
     <animate attributeName="d" values="
    m 31.160638,11.39617 c 0,0 -17.690496,334.70985 -15.580319,502.16566 1.164647,92.42211 15.580319,276.85028 15.580319,276.85028 l 1112.195062,0 c 30.539,0 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -25.1895,-49.1946433 -51.5349,-49.1379254 z;
m 31.160638,11.39617 c 0,0 77.863452,336.71337 68.313706,506.9596 -5.23657,93.35394 -68.313706,272.05634 -68.313706,272.05634 l 1112.195062,0 c 30.539,0 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -25.1895,-49.1946433 -51.5349,-49.1379254 z;
m 31.160638,11.39617 c 0,0 -17.690496,334.70985 -15.580319,502.16566 1.164647,92.42211 15.580319,276.85028 15.580319,276.85028 l 1112.195062,0 c 30.539,0 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -25.1895,-49.1946433 -51.5349,-49.1379254 z"
   dur="4s"
   repeatCount="indefinite"
   begin="svg1.click" /> 
         </path>

      </mask>
   </defs>
<image xlink:href="https://i.stack.imgur.com/9annC.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>

К анимации добавляется полупрозрачный бордюр

<path fill="white" stroke-width="10" stroke="#FF7E8F"

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="1200" height="800" viewBox="0 0 1200 800" preserveAspectRatio="xMinYMin meet"  >  
   <defs>
      <mask id="msk1">
    <rect width="100%" height="100%" fill="black" />
       <path fill="white"  stroke-width="10" stroke="#FF7E8F" d="m 31.160638,11.39617 c 0,0 -17.690496,334.70985 -15.580319,502.16566 1.164647,92.42211 15.580319,276.85028 15.580319,276.85028 l 1112.195062,0 c 30.539,0 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -25.1895,-49.1946433 -51.5349,-49.1379254 z">
     <animate attributeName="d" values="
    m 31.160638,11.39617 c 0,0 -17.690496,334.70985 -15.580319,502.16566 1.164647,92.42211 15.580319,276.85028 15.580319,276.85028 l 1112.195062,0 c 30.539,0 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -25.1895,-49.1946433 -51.5349,-49.1379254 z;
m 31.160638,11.39617 c 0,0 77.863452,336.71337 68.313706,506.9596 -5.23657,93.35394 -68.313706,272.05634 -68.313706,272.05634 l 1112.195062,0 c 30.539,0 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -25.1895,-49.1946433 -51.5349,-49.1379254 z;
m 31.160638,11.39617 c 0,0 -17.690496,334.70985 -15.580319,502.16566 1.164647,92.42211 15.580319,276.85028 15.580319,276.85028 l 1112.195062,0 c 30.539,0 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -25.1895,-49.1946433 -51.5349,-49.1379254 z"
   dur="4s"
   repeatCount="indefinite"
   begin="svg1.click" /> 
         </path>

      </mask>
   </defs>
<image xlink:href="https://i.stack.imgur.com/9annC.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>

К анимации изменения, вырезаемой формы изображения добавляется полупрозрачный фон

<mask id="msk1"> 
      <!-- Полупрозрачный фон-->
       <rect width="100%" height="100%" fill="red"/>
       <path fill="white" .../>
</mask>

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="1200" height="800" viewBox="0 0 1200 800" preserveAspectRatio="xMinYMin meet"  >  
   <defs>
      <mask id="msk1">
    <rect width="100%" height="100%" fill="red"/>
       <path fill="white" d="m 31.160638,11.39617 c 0,0 -17.690496,334.70985 -15.580319,502.16566 1.164647,92.42211 15.580319,276.85028 15.580319,276.85028 l 1112.195062,0 c 30.539,0 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -25.1895,-49.1946433 -51.5349,-49.1379254 z">
     <animate attributeName="d" values="
    m 31.160638,11.39617 c 0,0 -17.690496,334.70985 -15.580319,502.16566 1.164647,92.42211 15.580319,276.85028 15.580319,276.85028 l 1112.195062,0 c 30.539,0 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -25.1895,-49.1946433 -51.5349,-49.1379254 z;
m 1144.5542,8.9991946 c 0,0 4.1031,337.9695854 3.5955,506.9596054 -0.2749,91.49188 -3.5955,274.45331 -3.5955,274.45331 l -1.1985,0 c -0.823,10e-6 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -51.5349,-49.1379254 -51.5349,-49.1379254 z;
m 31.160638,11.39617 c 0,0 -17.690496,334.70985 -15.580319,502.16566 1.164647,92.42211 15.580319,276.85028 15.580319,276.85028 l 1112.195062,0 c 30.539,0 53.9779,-35.37784 53.9319,-61.12278 l -1.1985,-671.15221 c -0.047,-26.345457 -25.1895,-49.1946433 -51.5349,-49.1379254 z"
   dur="8s"
   repeatCount="indefinite"
   begin="svg1.click" /> 
         </path>

      </mask>
   </defs>
<image xlink:href="https://i.stack.imgur.com/9annC.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>

@Js ученик Добавлен новый ответ. Посмотрите, если интересно — Alexandr_TT, Jul 03 '19 at 08:43

Выпуклая картинка

2 Answers2

SVG Mask

Варианты анимации маски