css - 剪切元素未在剪切路径更改时更新

我在js中创建了一个具有clip-path css属性的图像。
我还在用svg中的剪切路径创建一个svg，并用一个圆圈作为遮罩。
渲染后看起来像这样：

`<svg id="ayads-bubble-svg" height="0" width="0">
  <defs>
    <clipPath id="bubble-path">
      <circle cx="188" cy="117" r="229">
      </circle>
    </clipPath>
  </defs>
</svg>`

我在滚动上更改了circle r属性，但是我的图像剪辑没有更新（如果我在检查器中禁用并启用了剪辑路径，它将起作用）。

如果你们有一个主意我会很高兴的
非常感谢 ！

最佳答案

如果我们没有所有（相关）代码段，很难说出您的妖精坐在哪里。但是，我做了一个简单的示例，对我来说效果很好（chrome v51.0 +）。

我希望这有帮助。

var circle = document.querySelector('circle')

window.addEventListener('scroll', function() {
  var delta = window.scrollY / (document.body.scrollHeight - window.innerHeight)
  circle.setAttribute('r', 50 - delta * 25)
})

html,
body {
  height: 200%;
}

svg {
  position: fixed;
}

<svg viewBox="0 0 200 200">
  <defs>
    <clipPath id="bubble-path">
      <circle cx="50" cy="50" r="50" />
    </clipPath>
  </defs>

  <rect width="100" height="100" clip-path="url(#bubble-path)" />
</svg>

Scroll Down

关于css - 剪切元素未在剪切路径更改时更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38009564/