title: Hover events for a dashed line in an SVG
body: <p>An SVG with a line (or path) which uses <code>stroke-dasharray</code> only seems to trigger CSS and JS hover events when the user hovers over the solid parts of the dashed line: <a href="https://codepen.io/anon/pen/YeXoZy" rel="nofollow noreferrer">https://codepen.io/anon/pen/YeXoZy</a></p>
  
  <p>Is there a simple way to make both the JS and CSS events trigger when the solid or invisible parts of the line are hovered?</p>
  
  <p>My current plan is to draw a second, invisible line following the same path and use it to detect mouse events. <a href="https://codepen.io/anon/pen/BYNgRR" rel="nofollow noreferrer">https://codepen.io/anon/pen/BYNgRR</a> This seems heavy handed and I'm hoping there's a cleaner way I'm missing.</p>