SVG pointer-events and stroke-dasharray

Question

In the next example I'm drawing an ellipse with no fill and a stroke-dasharray. The pointer-events is set to visibleStroke or stroke. When I mouse over the stroke the circle inside should change it's fill and the stroke:

ellipse:hover ~ circle {
  fill: LightSkyBlue;
  stroke: DodgerBlue;
}

The definition from MDN:

visibleStroke:
SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the stroke property does not affect event processing.

In the next example when I'm mousing over the dashes everything is as expected. However when I'm mousing over the gaps nothing happens. Even more: in Chrome the insensitive gaps seams to be offsetted. Is this a bug or a feature?

figure {
  width: 200px;
  height: 230px;
  border: 1px solid #d9d9d9;
  margin:1em;
}
figure::before {
  content: attr(data-pe);
  visibility: visible;
  color: indigo;
  background: skyBlue;
  display: block;
  padding: 0.5em;
}
ellipse {
  fill: none;
  stroke: #d9d9d9;
  stroke-dasharray: 4 3;
  stroke-width: 2;
}
ellipse:hover ~ circle {
  fill: LightSkyBlue;
  stroke: DodgerBlue;
}
circle {
  fill: royalBlue;
  stroke: red;
  stroke-width: 2;
  pointer-events: none;
}

<figure data-pe="visibleStroke">
    <svg viewBox="-12 -12 24 24">
      <ellipse rx="9" ry="9" style="pointer-events:visibleStroke;"></ellipse>
      <circle r="5"></circle>
    </svg>
</figure>