Question

我在js中创建了一个带有clip-path css属性的图像。我也在svg中用clip-path创建一个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>`

我正在更改滚动中的圆圈r属性，但我的图片剪辑未更新（如果我在检查器中禁用并启用剪辑路径，则可以正常工作）。

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

Answer 1

如果我们没有所有（相关的）代码片段，很难说 leprechaun 所在的位置。但是，我做了一个简单的例子，对我来说很合适（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

剪辑元素未在剪辑路径更改时更新

1 个答案: