如何使用 SVG 形状进行图像剪辑？

Posted 2023-03-23

【中文标题】如何使用 SVG 形状进行图像剪辑？

【英文标题】：How to do Image clipping by using SVG shapes?

【发布时间】：2019-09-30 06:06:32

【问题描述】：

谁能指导我如何使用 SVG 独特的形状制作 CSS 图像剪辑路径？ 有些人建议使用 SVG Injector 等第三方插件。任何人都可以帮助我如何完成这项适用于所有浏览器的任务？

我给出了一个示例图像，以便更好地理解。请检查下图。

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

感谢和赞赏。

【问题讨论】：

你尝试了什么？什么不起作用？

嗨，我是这个 SVG 和 Css 组合工作的新手。我正在寻找学习如何做到这一点。以下是我经过大量研究后所做的。但无处可寻如何使用独特的形状和做剪辑路径： - 任何示例或教程也将不胜感激。 ktdev.khaleejtimes.ae/bg/bg-shapenw1.html

css-tricks.com/using-css-clip-path-create-interactive-effects 在这里您可以了解如何创建蒙版以及如何使用它来创建不同的效果。

【参考方案1】：

首先，您需要绘制一条具有所需形状的路径。接下来，您使用该形状使用<clipPath> 剪切图像

svgborder: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   clip-path="url(#shape)"  xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" >
</image>

</svg>

【讨论】：

嗨 enxaneta，非常感谢。这正是我正在寻找的。只是一个快速的问题。这将兼容包括IE在内的所有浏览器？

嗨 enxaneta，这仅在 chrome 中显示，但在 FireFox (66.0.5)、Safari (5.1.7) 和 IE (11.096) 等其他浏览器中不显示。当我检查您在上面共享的“代码片段”预览时，我只能看到白色的空白屏幕。那么你能给我任何解决方案吗？

感谢您的评论，我认为现在应该可以了。显然<image> 需要宽度和高度。检查：Chrome、Firefox、Safari、Edge、IE

谢谢，亲爱的。现在完美了！ :)

@AtulRajput 图像也可以具有 x 和 y 属性。 x 和 y 属性的默认值为 0。在上面的示例中，我没有使用 x 和 y，这意味着 x="0" 和 y="0"。如果您需要移动图像以便看到狗的下半部分，则需要使用负 y 属性，例如 y="-150"。