SVG-события указателя и штрих-дашаррей

В следующем примере я рисую эллипс без заливки и штриховкой-дашарреем. pointer-events настроен на visibleStroke или stroke. Когда я наведу указатель мыши на обводку, круг внутри должен измениться на fill и stroke:

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

Определение из 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.

В следующем примере, когда я наводил курсор на черточки, все было так, как ожидалось. Однако когда я наведываю указатель мыши на пробелы, ничего не происходит. Более того: в Chrome необходимо компенсировать нечувствительные зазоры швов. Это ошибка или особенность?

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>