Javascript 如何相对于源SVG而不是目标元素应用SVG片段路径

我正在尝试将SVG

clipPath

应用于具有固定位置的单独背景

div

。我希望

剪辑路径

保持在原始SVG元素的准确位置，并在滚动（或转换）时相应地移动

取而代之的是，剪辑路径相对于目标元素的原点插入，并丢失所有定位、滚动和变换。是否有办法保留原始属性并将其应用于单独的div

在下面的嵌入式代码片段中，蓝色圆圈是我希望剪辑路径的位置，而红色圆圈是它显示的位置

#容器{
剪辑路径：url（#myClip）；
位置：固定；
宽度：100vw；
高度：100vh；
背景色：红色；
}
#胶印集装箱{
位置：绝对位置；
顶部：200px；
左：200px；
宽度：200px；
高度：200px；
边框样式：实心；
边框颜色：蓝色；
}

这在Firefox中（几乎）起作用，但在Chrome中却不起作用，Chrome显示了一个非常奇怪的bug

您将需要两个div：外部是相对定位的，并定义剪辑路径以使其移动。内胎是固定的。显然，需要显式设置顶部/左侧/宽度/高度，然后引用视口坐标

body{margin:0}
#容器{
位置：相对位置；
溢出：隐藏；
顶部：202px；/*边框*/
左：202px；
剪辑路径：url（#myClip）；
宽度：200px；
高度：200px；
}
#固定的{
位置：固定；
顶部：0px；
左：0px；
宽度：100vw；
高度：100vh；
背景色：红色；
}
#胶印集装箱{
位置：绝对位置；
顶部：200px；
左：200px；
宽度：200px；
高度：200px；
边框：2件纯蓝；
}

---

非常有趣。Chrome中确实存在奇怪的bug。Safari似乎完全忽略了剪辑路径！