如何在Vue网站中禁用Safari的Live Text功能？

核心原因 #

你之前添加的user-select、unselectable等属性仅作用于<img>标签本身，而Safari的Live Text会解析SVG内部的<text>元素内容，这些外层属性无法阻止内部文本被识别。以下是几种可行的解决方法：

方法1：将SVG中的文本转换为路径（最彻底）

Live Text只会识别SVG中的<text>元素，把文本转成矢量路径后就不会被识别了：

• 使用Figma、Adobe Illustrator等设计工具打开SVG，选中文本元素，执行「轮廓化描边」或「创建轮廓」操作；
• 重新导出为SVG文件替换原文件，这样SVG中不再包含可识别的文本内容，从根源解决问题。

方法2：内联SVG并控制内部文本样式

把SVG代码直接嵌入Vue组件模板，而非通过<img>引入，这样可以直接给内部文本添加阻止识别的样式：

<template>
  <div @click="goToHome()" class="logo-container">
    <!-- 内联SVG代码 -->
    <svg xmlns="http://www.w3.org/2000/svg" class="img-logo-navbar">
      <style>
        /* 阻止Safari识别文本 */
        text {
          user-select: none;
          -webkit-user-select: none;
          pointer-events: none;
        }
      </style>
      <!-- 原SVG的图形和文本内容 -->
      <text x="0" y="20">hello</text>
      <text x="0" y="40">world.com</text>
    </svg>
  </div>
</template>

方法3：通过容器代理点击事件并禁用SVG的指针事件

如果不想修改SVG文件或内联代码，可以给<img>套一层容器，由容器处理点击跳转，同时禁用SVG本身的指针事件，阻止Live Text的交互：

<template>
  <div 
    @click="goToHome()" 
    class="logo-container"
    style="display: inline-block; cursor: pointer;"
  >
    <img 
      class="img-logo-navbar" 
      src="/imgs/logo-RCN-black.svg"
      style="pointer-events: none;"
    />
  </div>
</template>

方法4：修改SVG文件内部样式

直接在SVG文件的<svg>标签内添加样式，阻止内部文本被选择：

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    text {
      -webkit-user-select: none;
      user-select: none;
      pointer-events: none;
    }
  </style>
  <!-- 原SVG内容 -->
</svg>

内容的提问来源于stack exchange，提问作者Tony Dev