SVG clip-path创建“手绘”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-borderattribute解决问题吗？这会使呈现方式有所不同吗？我没有设法找到当前的设置来实现这一点 - 基本上，据我所知，我需要包含相同的SVG并正确地“切片”它（9场）。但是，我不明白添加边框的位置，因为我需要将其作为div的“内部”。

我希望这在某种程度上有道理。

提前致谢！

Answer 1

作为替代方案，您可以使用CSS和混合模式，如果这适合您：

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-overlay。