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

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

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

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

Спасибо и признателен.

John smith FN 13.05.2019 источник

comment

что ты пробовал? Что не сработало? - cloned 13.05.2019

comment

Привет, я новичок в этой работе с комбинацией SVG и Css. Я ищу, чтобы узнать, как это сделать. Ниже приведено то, что я сделал после долгих исследований. Но нигде не смог найти, как использовать уникальные формы и сделать путь обрезки: - Любые примеры или учебные пособия также будут очень признательны. ktdev.khaleejtimes.ae/bg/bg-shapenw1.html - John smith FN 13.05.2019

comment

css-tricks.com/using-css-clip-path -create-interactive-effects здесь вы можете прочитать о том, как создать маску и как использовать ее для создания различных эффектов. - cloned 13.05.2019

Ответы (1)

arrow_upward
3
arrow_downward

Сначала нужно нарисовать путь нужной формы. Затем вы используете фигуру, чтобы обрезать изображение, используя <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>

enxaneta 13.05.2019

comment

Привет enxaneta, Большое спасибо. Это именно то, что я ищу. Просто быстрый вопрос. Это будет совместимо со всеми браузерами, включая IE? - John smith FN; 14.05.2019

comment

Привет, enxaneta, Это отображается только в Chrome, но не отображается в других браузерах, таких как FireFox (66.0.5), Safari (5.1.7) и IE (11.096). Я просто вижу белый пустой экран, когда я проверил предварительный просмотр фрагмента кода, которым вы поделились выше. Итак, не могли бы вы дать мне какое-либо решение для этого, пожалуйста? - John smith FN; 14.05.2019

comment

Спасибо за комментарий, я думаю, теперь это должно работать. Очевидно, <image> нужны были и ширина, и высота. Проверено: Chrome, Firefox, Safari, Edge, IE - enxaneta; 14.05.2019

comment

Спасибо, дорогой. Теперь все идеально! :) - John smith FN; 14.05.2019

comment

как изменить положение изображения в пути клипа? если я хочу показать нижнюю часть собаки, а не морду с тем же изображением, как это сделать? - Atul Rajput; 16.07.2020

comment