html - 创建 "handdrawn"div 的 SVG 剪辑路径 - 兼容性问题和替代方案？

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 和混合模式:

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>