在 React 中以组件形式导入 SVG 时，Chrome 浏览器的默认双击文本选择行为会“跨元素”高亮最近的可选文本内容；可通过 user-select: none 安全禁用该行为，且不影响 SVG 交互功能。
在 react 中以组件形式导入 svg 时，chrome 浏览器的默认双击文本选择行为会“跨元素”高亮最近的可选文本内容；可通过 `user-select: none` 安全禁用该行为，且不影响 svg 交互功能。
该问题本质是浏览器（尤其是 Chrome）的双击文本选择扩散机制：当用户双击一个不可文本化的内容（如 、
虽然 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 classname="{`icon" style="{{" ...props.style webkituserselect: mozuserselect: userselect:></infoiconsvg>
);
export default InfoIcon;</svgsvgelement>
⚠️ 注意事项：
-
user-select: none不会阻止点击事件、hover 动画或 SVG 内部 - 不影响
tabindex、键盘焦点或 ARIA 可访问性； - Firefox 和 Safari 同样支持该属性，因此属于跨浏览器安全方案；
- 避免滥用在可编辑区域（如富文本编辑器中的图标工具栏），以免干扰用户预期操作。
? 进阶提示： 若项目使用 CSS-in-JS（如 Emotion 或 styled-components），可直接在 Styled SVG 组件中注入该样式；若使用 Tailwind CSS，可扩展配置添加 select-none 工具类并应用于 SVG 包裹容器或 SVG 自身（需确保 svg 元素能接收该类）。
总之，user-select: none 是语义清晰、兼容性强、零副作用的标准解法，应作为 React SVG 组件的默认样式守则之一。
