Как сделать обрезку изображения с помощью форм SVG? - PullRequest
Новая
       97

Как сделать обрезку изображения с помощью форм SVG?

0 голосов
/ 13 мая 2019

Кто-нибудь может подсказать мне, как сделать путь CSS Image Clip с уникальными фигурами SVG? Некоторые люди предлагали сторонний плагин, такой как SVG Injector и все. Кто-нибудь может мне помочь, как решить эту задачу, которая будет работать во всех браузерах?

Я привел один пример изображения, чтобы сделать его более понятным. Пожалуйста, проверьте изображение ниже.

enter image description here

http://ktdev.khaleejtimes.ae/shape.jpg

Спасибо и ценим.

1 Ответ

0 голосов
/ 13 мая 2019

Сначала вам нужно нарисовать путь с нужной формой.Затем вы используете форму, чтобы обрезать изображение, используя <clipPath>

svg{border:1px solid}
<svg viewBox="0 0 643 525">
  
  <defs>
    <clipPath id="shape">
      <path fill="none" d="M109,120c0,0,163,46,220,9s34-97,34-97s39.138-16.341,70-11c26.406,4.57,66.618,73.939,105,138
	c37.199,62.089,73,119,73,119s10.398,18.504,0,44c-8.608,21.105-22.685,41.421-88.85,85.03C468.32,442.51,411,474,411,474
	s-85,45-192,9l-5,1c0,0-34.254,15.226-60.675,10.088c-36-7-48.249-32.676-48.249-32.676S172,402,160,327S60,220,60,220
	s-8.444-34,0-52C77.666,130.345,109,120,109,120z"/>
    </clipPath>
    
  </defs>
<image width="643" height="643" clip-path="url(#shape)"  xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" >
</image>

</svg>
...