javascript - 如何应用相对于原始 SVG 而不是目标元素的 SVG 剪辑路径

Question

我正在尝试将 SVG clipPath 应用于具有固定定位的单独背景 div。我希望 clip-path 保留在原始 SVG 元素的确切位置，并在滚动(或以其他方式转换)时相应地移动。

相反，剪辑路径是相对于目标元素的原点插入的，并且会丢失所有定位、滚动和变换。有没有办法保留原始属性并将它们应用于单独的 div？

在下面的嵌入片段中，蓝色圆圈是我希望 clip-path 所在的位置，而红色圆圈是它显示的位置。

#container {
  clip-path: url(#myClip);
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: red;
}

#offset-container {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 200px;
  height: 200px;
  border-style: solid;
  border-color: blue;
}

<div id='container'>

</div>

<div id='offset-container'>
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="myClip">
      <circle cx="50%" cy="50%" r="50%"/>
    </clipPath>
  </defs>
  <circle cx="50%" cy="50%" r="50%" fill='blue' fill-opacity='0.5'/>
</svg>
</div>

JSFiddle:https://jsfiddle.net/shongololo/pa0qLs45/1/

Answer 1

这(几乎)在 Firefox 中有效，但在 Chrome 中无效，它显示了一个非常奇怪的错误。

您将需要两个 div:外部是相对定位的，并定义了剪辑路径以便它移动。内部定位固定。显然，需要显式设置top/left/width/height，然后引用视口(viewport)坐标。

body { margin: 0 }

#container {
  position: relative;
  overflow: hidden;
  top: 202px; /* border! */
  left: 202px;
  clip-path: url(#myClip);
  width: 200px;
  height: 200px;
}

#fixed {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: red;
}

#offset-container {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 200px;
  height: 200px;
  border: 2px solid blue;
}

<div id='container'>
    <div id="fixed"></div>
</div>

<div id='offset-container'>
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="myClip">
      <circle cx="50%" cy="50%" r="50%"/>
    </clipPath>
  </defs>
  <circle cx="50%" cy="50%" r="50%" fill='blue' fill-opacity='0.5'/>
</svg>
</div>