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

121
16 марта 2021, 12:20

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

Answer 1

Можно на 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>

Answer 2

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>

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

    <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>

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

READ ALSO
Как выполнить скрипт на странице из строки в java script?
HTML

Как выполнить скрипт на странице из строки в java script?

Для серверного рендеринга web components, мне надо что бы у меня выполнился скрипт на страницеЕсли я делаю запрос на сервер и получаю ответ строка...

 95
Как считать из span с помощью textContext
HTML

Как считать из span с помощью textContext

Подскажите, почему при попытке считать textContent из span, выдает ошибку:

 108
Не инициализируется свойство Connection String
c#

Не инициализируется свойство Connection String

Всем привет !

 94
Проблемы с доступом к файлу из приложения Xamarin.Forms
c#

Проблемы с доступом к файлу из приложения Xamarin.Forms

Столкнулся со следующей проблемойЕсть файл базы данных SQLite, необходимо его скопировать на SD карту смартфона Android

 111