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

问题描述

我想在白色背景上重新创建一个“手绘/笔触”样式的 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 的“内部”。

我希望这有某种意义。

提前致谢！

标签： htmlcsssvgclip-path

作为替代方案，如果这适合您，您可以使用 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>

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

问题描述

解决方案

推荐阅读