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

172

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

135

MySQL

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

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

169

HTML

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

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

162

HTML

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

Есть html:

168