在 React 中以组件形式导入 SVG 时，Chrome 浏览器的默认双击文本选择行为会“跨元素”高亮最近的可选文本内容；可通过 user-select: none 安全禁用该行为，且不影响 SVG 交互功能。
在 react 中以组件形式导入 svg 时，chrome 浏览器的默认双击文本选择行为会“跨元素”高亮最近的可选文本内容；可通过 `user-select: none` 安全禁用该行为，且不影响 svg 交互功能。
该问题本质是浏览器（尤其是 Chrome）的双击文本选择扩散机制：当用户双击一个不可文本化的内容（如 <svg></svg>、<img alt="如何阻止 SVG 组件双击时意外高亮相邻文本" > 或空元素），浏览器会自动查找 DOM 树中最近的可选文本节点（按树遍历顺序：同级 → 父级 → 祖先兄弟等），并将其高亮——这并非 React 或 SVG 特有，而是原生渲染行为。
虽然 onClick 中调用 e.preventDefault() 或 e.stopPropagation() 对此无效（因为双击选中由 selectstart 事件触发，而非 click），但 CSS 层面的 user-select: none 是精准、轻量且标准的解决方案。
✅ 推荐做法：为所有 SVG 组件统一添加样式
/* 方式 1：全局重置（推荐） */
svg,
[role="img"],
.react-svg-icon {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}或针对具体组件局部控制：
// InfoIcon.tsx（封装后的 SVG 组件）
import React from 'react';
import { ReactComponent as InfoIconSvg } from '../../resources/svg/icons/basic/info-icon.svg';
const InfoIcon = (props: React.SVGProps<SVGSVGElement>) => (
<InfoIconSvg
{...props}
className={`icon ${props.className || ''}`}
style={{
...props.style,
WebkitUserSelect: 'none',
MozUserSelect: 'none',
userSelect: 'none'
}}
/>
);
export default InfoIcon;⚠️ 注意事项：
-
user-select: none不会阻止点击事件、hover 动画或 SVG 内部<text></text>元素的选中（若需禁用内部文本选中，需单独对<text></text>设置）； - 不影响
tabindex、键盘焦点或 ARIA 可访问性； - Firefox 和 Safari 同样支持该属性，因此属于跨浏览器安全方案；
- 避免滥用在可编辑区域（如富文本编辑器中的图标工具栏），以免干扰用户预期操作。
? 进阶提示： 若项目使用 CSS-in-JS（如 Emotion 或 styled-components），可直接在 Styled SVG 组件中注入该样式；若使用 Tailwind CSS，可扩展配置添加 select-none 工具类并应用于 SVG 包裹容器或 SVG 自身（需确保 svg 元素能接收该类）。
总之，user-select: none 是语义清晰、兼容性强、零副作用的标准解法，应作为 React SVG 组件的默认样式守则之一。
