События указателя SVG и штрих-черточка - PullRequest
Новая
       28

События указателя SVG и штрих-черточка

0 голосов
/ 19 декабря 2018

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

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

Определение от MDN :

visibleStroke:
Только SVG.Элемент может быть целью события мыши, только когда свойство видимости установлено в видимое и когда курсор мыши находится над периметром (то есть штрихом) элемента. Значение свойства обводки не влияет на обработку событий. .

В следующем примере, когда я наводим курсор на тире, все происходит так, как ожидалось.Однако, когда я копаюсь в промежутках, ничего не происходит.Еще больше: в 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>
...