intersectionObserver 仅触发一次

问：

我正在尝试使用新的 Intersection Observer API，但我只能触发一次它的事件。我相信我正确地使用它，因为我几乎逐字使用了 MDN 示例。

https://jsfiddle.net/bukzor/epuwztn0/106/

function startObserver() {
  // Almost verbatim from MDN docs:
  //   https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
  let options = {
    root: document.querySelector('#svg'),
    rootMargin: '0px',
    threshold: 0.50,
  }

  let observer = new IntersectionObserver(onIntersection, options);

  let target = document.querySelector('circle');
  observer.observe(target);
}

function onIntersection(entries, observer) {
  // Simply log all intersectiono entries.
  console.log(observer)
  console.log("intersections:")
  entries.forEach(function(entry) {
    console.log(entry)
    // This code is just a wild guess, but it still won't fire a second time.
    observer.observe(entry.target)
  })
}

当我运行它时，我在控制台中只得到一个条目，而没有另一个条目。它提到的零大小矩形，似乎是额外的症状，但我无法找到原因。isVisible: false

IntersectionObserver {root: svg#svg, rootMargin: "0px 0px 0px 0px", thresholds: Array(1), delay: 0, trackVisibility: false}
intersections:
IntersectionObserverEntry {time: 550.8100000151899, rootBounds: DOMRectReadOnly, boundingClientRect: DOMRectReadOnly, intersectionRect: DOMRectReadOnly, isIntersecting: false, …}
   time: 550.8100000151899
   rootBounds: DOMRectReadOnly {x: 0, y: 0, width: 0, height: 0, top: 0, …}
   boundingClientRect: DOMRectReadOnly {x: 0, y: 0, width: 0, height: 0, top: 0, …}
   intersectionRect: DOMRectReadOnly {x: 0, y: 0, width: 0, height: 0, top: 0, …}
   isIntersecting: false
   intersectionRatio: 0
   target: circle
   isVisible: false

更重要的是，我相信 API 本身在我的浏览器上运行良好，因为这个演示运行良好（如下）。这实际上与我的例子非常相似。

http://szager-chromium.github.io/IntersectionObserver/demo/svg/

我做错了什么？