问题描述
我正在尝试使用 SVG 蒙版和 CSS clip-path 属性在网站上制作一些“参差不齐”的部分分隔符。
我需要能够将 ese“参差不齐”的底部边缘应用于任何高度的部分/行，因此我需要能够根据需要定位并希望缩放它们，具体取决于部分的高度，希望视口宽度也是如此。
我可以使用 clip-path: url(#svg-id); 方法添加 SVG 蒙版 — 到目前为止一切顺利！
我无法弄清楚如何使用 CSS 定位 SVG（例如在页面上向上或向下移动），但我确实发现我可以在 svg 路径本身中添加一个 transform="translate(X,Y);" 属性HTML 作为定位 SVG 的解决方法。
现在的问题是，如果我使用这种方法将 SVG 向下移动到页面上，它也会开始屏蔽被屏蔽元素的顶部边缘 - 表现得像一个“窗口”并屏蔽掉它外面的所有东西，如与仅屏蔽 SVG 的屏蔽部分相反。
这是一个代码笔，显示我目前所处的位置：https://codepen.io/moonweasel/pen/PomJgej
我很感激任何人都可以给我的关于如何使用 SVG 仅屏蔽它所应用到的元素的底部边缘的任何指示，并保留元素的其余部分显示，以及如果可能的话如何定位SVG 使用 CSS 而不是必须向 HTML SVG 路径添加属性。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）