文章/答案/技术大牛

发布

社区首页 >问答首页 >防止在内联svg上选择附近的文本

问防止在内联svg上选择附近的文本
EN

Stack Overflow用户

提问于 2020-04-15 13:32:01

回答 1查看 134关注 0票数 1

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

html

css

svg

inline-svg

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-15 15:24:11

你是这个意思吗？(添加用户-select: none；)

.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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61230050

复制

相似问题

问防止在内联svg上选择附近的文本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止在内联svg上选择附近的文本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止在内联svg上选择附近的文本
EN