Clipped element not updating on clip-path changes

Question

I got an image created in js with a clip-path css attribute. I'm also creating an svg with a clip-path in svg, with a circle used as mask. Rendered it looks like this :

`<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>`

I'm changing circle r attribute on scroll, but my image clip isn't updated (while if I disable and enable clip-path in inspector it works).

I'll be really please if you guys have an idea Thanks a lot !

Both tried setAttribute and setAttributeNS `$circle.setAttribute('r', 30); $circle.setAttributeNS(null,'r', 30);` — Adrien, Jun 24 '16 at 09:18
Please include a working example of your code. Also, is it failing in all browsers? — Paul LeBeau, Jun 24 '16 at 16:02

score 1 · Answer 1 · answered Jun 24 '16 at 14:26

It's hard to say where your leprechaun sits, if we don't have all (related) pieces of code. However, I made an simple example which works just fine, for me (chrome v51.0+).

I hope this helps.

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

Clipped element not updating on clip-path changes

1 Answers1