How to detect if element is hidden by clip-path

Viewed 531

I need to detect if element is visible or not on svg that have clip-path.

jQuery is(':visible') return true, I tried to use Intersection Observer with code like this:

var element = document.querySelector('svg circle');
if (window.IntersectionObserver) {
  var observer = new IntersectionObserver(function(entries) {
    if (entries[0].intersectionRatio) {
      console.log('visible');
    } else {
      console.log('hidden');
    }
  }, {
    root: document.body
  });
  observer.observe(document.querySelector('svg'));
}

but this log visible for both hidden and visible circles and it will not work in Safari according to Can I use

is there solution that will work in Chrome, Safari, Firefox and Edge (I don't care about IE) that will detect if element is visible or hidden by clip-path?

0 Answers
Related