Как расширить регион действия клика

134
31 августа 2019, 10:40

Допустим имеем структурную схему проекта или схему БД, на которой прямоугольники, изображающие объекты, соединены линиями. Которые в свою очередь выполняют роль ссылок. 

.container { 
width:50%; 
height:50%; 
} 
#line { 
fill:none; 
stroke:black; 
stroke-width:1; 
} 
#line:hover { 
stroke:red; 
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 400 400" >   
    <rect x="10" y="40" width="100" height="50" rx="10" fill="skyblue" />	 
	 <rect x="280" y="140" width="100" height="50" rx="10" fill="purple" /> 
   <a class="link" href="https://ru.stackoverflow.com/q/936744/28748">	 
	<polyline id="line"  points="110, 65 200,65 200,165 280 165" /> 
   </a>	 
</svg>

Одно из требований,- толщина линии-ссылки не должны превышать 1px

Но при достаточно большой схеме, в результате масштабирования SVG реально эти линии становятся ещё тоньше. Поэтому довольно проблематично попасть курсором в линию-ссылку.

Как расширить регион действия клика курсора мышки, допустим до 10px в толщину, но при этом видимая толщина линии не должна превышать 1px

Принимается любое решение css, svg

Напрашивается решение, лежащее на поверхности,- с двумя линиями, но желательно использовать только одну линию.

Answer 1

Готово, так подходит?

.container { 
width:50%; 
height:50%; 
} 
#line-transparent { 
  fill: none; 
  stroke: transparent; 
  stroke-width: 10px; 
} 
#line-transparent:hover { 
  stroke: transparent; 
} 
#line-transparent + #line { 
fill:none; 
stroke:black; 
stroke-width:1; 
} 
#line-transparent:hover + #line, 
#line-transparent + #line:hover { 
stroke:red; 
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 400 400" >   
    <rect x="10" y="40" width="100" height="50" rx="10" fill="skyblue" />	 
    <rect x="280" y="140" width="100" height="50" rx="10" fill="purple" /> 
  <a class="link" href="https://ru.stackoverflow.com/q/936744/28748">	 
    <polyline id="line-transparent"  points="110, 65 200,65 200,165 280 165" /> 
    <polyline id="line"  points="110, 65 200,65 200,165 280 165" /> 
  </a>	 
</svg>

Answer 2

#1

Чтобы ширина линии не менялась при масштабировании SVG (изменении области просмотра) в SVG есть свойство, которое обеспечивает постоянную толщину линии при изменении масштаба.

vector-effect="non-scaling-stroke"

Идея решения с одной линией:

Использовать две линии, одна видимая толщиной 1px, а под ней невидимая, более широкая, которая становится видимой при наведении 

.container { 
width:50%; 
height:50%; 
 
} 
#line1 { 
fill:none; 
stroke:transparent; 
stroke-width:10; 
 
 
} 
#line1:hover { 
stroke:crimson;  
 
} 
#line2 { 
fill:none; 
stroke:black; 
stroke-width:1; 
pointer-events:none; 
 
}
<div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 400 400"  >   
    <rect x="10" y="40" width="100" height="50" rx="10" fill="skyblue" />	 
	 <rect x="280" y="140" width="100" height="50" rx="10" fill="purple" /> 
   <a class="link" href="https://ru.stackoverflow.com/q/936744/28748">	 
	<polyline id="line1" vector-effect="non-scaling-stroke" points="110, 65 200,65 200,165 280 165"  /> 
	<polyline id="line2" vector-effect="non-scaling-stroke" points="110, 65 200,65 200,165 280 165" /> 
   </a>	 
</svg>	 
</div>

#2 Анимация увеличение толщины линии

Идея решения:

Используется одна линия, при наведении на неё происходит анимация расширения толщины до 10px, облегчая тем самым попадание курсора для клика. 

.container { 
width:50%; 
height:50%; 
} 
#line { 
fill:none; 
stroke:black; 
stroke-width:1; 
transition:  ease-out 0.3s; 
} 
#line:hover { 
stroke-width:10; 
stroke:gray; 
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 400 400" >   
    <rect x="10" y="40" width="100" height="50" rx="10" fill="skyblue" />	 
	 <rect x="280" y="140" width="100" height="50" rx="10" fill="purple" /> 
   <a class="link" href="https://ru.stackoverflow.com/q/936744/28748">	 
	<polyline id="line"  points="110, 65 200,65 200,165 280 165" /> 
   </a>	 
</svg>

READ ALSO
Подписки на события используя RxJs
javascript

Подписки на события используя RxJs

Я создаю Observable и подписываюсь на него дважды, но при этом обновление приходит только для последнего подписавшегося:

 97
Выбрать данные по подстрокам mysql
MySQL

Выбрать данные по подстрокам mysql

Есть две таблицы (brands и symbols) c полями (brand,num и symb,number соответственно) (Взял для примера несколько строк, на самом деле их гораздо больше)

 132
сайт с вопросами на одной странице [закрыт]
HTML

сайт с вопросами на одной странице [закрыт]

здравстуйте, хочу сделать сайт со следующими друг за другом вопросами, отвечаешь на один вопрос, на том же месте появляется другой, но без...

 125
Получение имени элемента JS
HTML

Получение имени элемента JS

Есть html:

 131