如何解决如何使用 CSS 定位 SVG 剪辑路径并仅剪辑剪辑元素的一个边缘
我正在尝试使用 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 举报，一经查实，本站将立刻删除。
