如何使用 svg 形状来遮罩图像？

Question

我有一个 SVG 形状，我想将其用作蒙版，以便我添加到它的每个图像都在该形状内。

这是我想用作面具的形状：

这是我的 svg 代码，用于获取该蒙版，但颜色为黑色

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="157.000000pt" height="163.000000pt" viewBox="0 0 157.000000 163.000000" preserveAspectRatio="xMidYMid meet">
   <metadata>
      My svg Mask
   </metadata>
   <g transform="translate(0.000000,163.000000) scale(0.100000,-0.100000)"
      fill="#000000" stroke="none">
      <path d="M373 1197 c-355 -355 -363 -363 -363 -402 0 -39 8 -47 363 -402 355
         -355 363 -363 402 -363 39 0 47 8 402 363 355 355 363 363 363 402 0 39 -8 47
         -363 402 -355 355 -363 363 -402 363 -39 0 -47 -8 -402 -363z"/>
   </g>
</svg>

这是我想通过添加图像来实现的最终结果

如何使我添加到我的网站的任何图像被 svg 文件或红色形状屏蔽，以便它们像这样显示？

Answer 1

这是通过 CSS 应用 SVG 剪切路径的示例：

body {
  margin: 0
}

.test {
  height: 160px;
  width: 170px;
  -webkit-clip-path: url(#shape);
  clip-path: url(#shape);
}

<svg width="0" height="0">
    <defs>
        <clipPath id="shape">
            <path transform="translate(0.000000,163.000000) scale(0.100000,-0.100000)" d="M373 1197 c-355 -355 -363 -363 -363 -402 0 -39 8 -47 363 -402 355
-355 363 -363 402 -363 39 0 47 8 402 363 355 355 363 363 363 402 0 39 -8 47
-363 402 -355 355 -363 363 -402 363 -39 0 -47 -8 -402 -363z" />
        </clipPath>
    </defs>
</svg>
<img class='test' src='https://placeimg.com/640/480/animals' />

要记住的一件事是，您不能g在剪贴蒙版内使用（分组标签），否则它不会显示；

出于这个原因，在你的前任中，你会直接在路径上找到转换属性，而不是在 g 标签上。

小提琴