3

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?

jcubic
  • 61,973
  • 54
  • 229
  • 402
  • If part is visible it should be visible. – jcubic Sep 11 '18 at 10:36
  • And you consider only the painted area right? What if this area is actually hidden by an other element? What if it is actually hidden by a mask rather than a clip-path? And more importantly, what is the use case? – Kaiido Sep 11 '18 at 10:41
  • 1
    For all but Firefox: https://stackoverflow.com/questions/2174640/hit-testing-svg-shapes (you'd call `[...svg.getIntersectionList(svg.getBBox(), svg)].includes(your_element)` where `svg` is the root node). – Kaiido Sep 11 '18 at 10:53
  • @Kaiido it don't work, it returns true for both hidden and visible element. and I've also tried to use `svg.getIntersectionList(clip.getBBox(), clip)`. – jcubic Sep 11 '18 at 11:46
  • Can you provide a minimal set-up? For me it works: https://jsfiddle.net/gpjq32hr/ – Kaiido Sep 11 '18 at 12:25
  • this don't work, I've moved circle that have clip-path inside svg and it return false for both cases. Is my example correct? https://jsfiddle.net/gpjq32hr/9/ – jcubic Sep 11 '18 at 13:07
  • ... sorry, (it's the first time I use this poorly documented method), the rect was wrong. Seems it takes viewport coords... Anyway, [this](https://jsfiddle.net/gpjq32hr/10/) seems to work. – Kaiido Sep 11 '18 at 13:23

0 Answers0