防止内联 svg 单击时选择附近的文本

Question

使用内联 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>

Answer 1

你是这个意思吗？（添加了用户选择：无；）.wrap {&nbsp; height: 100px;&nbsp; &nbsp; -webkit-user-select: none;&nbsp; -moz-user-select: none;&nbsp; -ms-user-select: none;&nbsp; user-select: none;}.icon {&nbsp; height: 100%;&nbsp; pointer-events: bounding-box;&nbsp; cursor: pointer;}<div class="wrap">&nbsp; <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136 136">&nbsp; &nbsp; <defs/>&nbsp; &nbsp; <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"/>&nbsp; </svg></div><div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>