2

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>
enxaneta
  • 31,608
  • 5
  • 29
  • 42
  • 1
    The value of the stroke property does not affect processing, it says nothing about the value of the stroke-dasharray property. Firefox works like Chrome so if there's already browser compatibility, that's the way it is. There appears to be no offsetting in Firefox so perhaps that part is a Chrome bug. – Robert Longson Dec 19 '18 at 11:30
  • 2
    I'm not sure this a bug. You can solve this problem by adding a transparent ellipse under the dashed one. – Nicolas Roehm Dec 19 '18 at 11:54

0 Answers0