svg dashed line hover only when mouse is over the path

Question

i've got this jsfiddle demo i built

and the problem is that hover effect already triggered when mouse reaches the view box. i would like it happen only when mouse is over the path of the line itself

CSS hover style:

svg:hover path#path-1{
   stroke: orange !important;
 }

the line was created with illustrator.

Answer 1

Try using this directly and it will work i tested it

#path-1:hover{
   stroke: orange !important;
 }

line is so narrow hover will not directly work you have to check it closely.

Updated Fiddle