SVG剪切路径以创建“手绘” div-兼容性问题和替代方案？

Question

我想在白色背景上重新创建一个“手绘/笔触”样式div，如下图所示：

这似乎是clip-path-CSS样式的完美匹配。我继续创建了SVG，使用了clipPathUnits="objectBoundingBox"属性并遇到了第一个问题。当使用clip-path: url(urlto.svg#pathid);时，它不会呈现，但是当我将SVG包括在页面中（隐藏）时，它可以工作。我已经在StackOverflow上阅读了多次，但从未阅读过任何解决方案。这种行为正常吗？

如前所述，我可以将其与站点嵌入的SVG一起使用，但是从clip-path功能的规范文档中可以看出，WebKit（通常是Safari和iOS）在正确呈现事物方面存在问题。我尝试添加前缀，但这也不起作用。

我的问题是：您是否认为我可能错过了SVG或CSS规范中的某些内容，可能使其无法在Safari中工作？或者，如果不是，您是否认为可以使用mask-border属性解决问题？在渲染方面有什么区别吗？我没有找到能够使该工作正常进行的当前设置-基本上，据我了解，我需要包括相同的SVG并将其正确“切片”（9字段）。但是，我不知道该边框的添加位置，因为我需要将其添加到div的“内部”。

我希望这在某种程度上是合理的。

谢谢！

Answer 1

或者，如果适合，您可以使用CSS和blend-modes来实现：

div{position:relative;width:300px;height:300px;}
div img{position:absolute;
}
img:nth-of-type(2){mix-blend-mode: screen;}

<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt="Darwin" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/brush.gif" alt="brush" />
</div>

Answer 2

供以后参考：我最终使用了可能最简单的方法，如用户Timlind所建议-再次感谢您的评论！

<div id="container">
   # CONTENT #
  <div id="cover"><img src="path/to/svg"></div>
</div>

CSS很简单：

#container {
    position: relative;
}

#cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

当心SVG内部的viewbox定义，以方便缩放（在svg定义中没有固定和高度），并设置preserveAspectRatio="none"（在此用例中）。

pointer-events: none允许用户“点击” svg叠加层。