我正在尝试使用 SVG 蒙版和 CSSclip-path属性在网站上制作一些“参差不齐”的部分分隔线。
我需要能够将这些“参差不齐”的底部边缘应用于任何高度的部分/行，因此我需要能够根据部分的高度定位并希望根据需要缩放它们，并希望视口宽度以及。
我可以使用该clip-path: url(#svg-id);方法添加 SVG 蒙版 — 到目前为止一切顺利！
我无法弄清楚如何使用 CSS 定位 SVG（例如向上或向下移动页面），但我确实发现我可以transform="translate(X,Y);"在 HTML 中向 svg 路径本身添加一个属性作为定位 SVG 的解决方法.
现在的问题是，如果我使用这种方法将 SVG 移到页面下方，它也会开始屏蔽被屏蔽元素的顶部边缘——表现得像一个“窗口”并屏蔽掉它之外的所有东西，而不仅仅是屏蔽 SVG 的屏蔽部分。
这是一个代码笔，显示我到目前为止的位置：https ://codepen.io/moonweasel/pen/PomJgej
我将不胜感激任何人都可以给我关于如何使用 SVG 仅掩盖它所应用的元素的底部边缘，并让其余元素显示，以及如果可能的话如何使用 CSS 定位 SVG 的任何指针而不必向 HTML SVG 路径添加属性。