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

Question

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

cssimagesvg

4

我有一个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文件或红色图形遮罩，以便显示类似于此图片？

- Man Of God

1

你不想要一个clipPath而不是一个mask吗？ - Robert Longson

我很乐意帮忙，只是我不知道如何使用ClipPath得到那个精确的形状。你有什么想法如何得到那个精确的形状吗？谢谢。 - Man Of God

1

在设置了rx的矩形元素上执行rotate(45)变换。 - Robert Longson

非常感谢，但我无法找到可在各种浏览器上运行的解决方案。您能否为我提供一个jsfiddle？我对跨浏览器的clipPath不是很熟悉。谢谢！ - Man Of God

@RobertLongson 这是我能想到的 http://codepen.io/manofgod/pen/YXbKLr 然而，这在IE上不兼容。 - Man Of God

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- maioman · Accepted Answer

这是一个应用SVG裁剪路径的CSS示例：

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 标签上。

fiddle