Предотвратить выделение текста поблизости при щелчке встроенного SVG - PullRequest
Новая
       4

Предотвратить выделение текста поблизости при щелчке встроенного SVG

1 голос
/ 15 апреля 2020

При использовании встроенного SVG в качестве интерактивного элемента, дважды щелкнув по нему, можно выделить ближайший текст.

Как это можно предотвратить без принудительного выбора пользователем всех соседних элементов? 

.wrap {
  height: 100px;
}
.icon {
  height: 100%;
  pointer-events: bounding-box;
  cursor: pointer;
}
<div class="wrap">
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136 136">
    <defs/>
    <path fill="none" stroke="rgb(160,70,255)" stroke-width="3" d="M68 134.43A66.43 66.43 0 101.5 68 66.46 66.46 0 0068 134.43zM123.77 68H12.23M68 12.3v111.41"/>
  </svg>
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>

1 Ответ

0 голосов
/ 15 апреля 2020

Это то, что вы имеете в виду? (Добавлен пользовательский выбор: нет;) 

.wrap {
  height: 100px;
    -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}
.icon {
  height: 100%;
  pointer-events: bounding-box;
  cursor: pointer;
}
<div class="wrap">
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136 136">
    <defs/>
    <path fill="none" stroke="rgb(160,70,255)" stroke-width="3" d="M68 134.43A66.43 66.43 0 101.5 68 66.46 66.46 0 0068 134.43zM123.77 68H12.23M68 12.3v111.41"/>
  </svg>
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
...