如何将SVG路径当作文本字符进行处理？

我制作了一个信头SVG，它使用了正确的字体、字重、字间距等设置，完美呈现了特定的平面设计风格。但我的客户电脑上都没有这些字体，在虚拟机中测试发现，用Edge/Firefox打开该SVG时，因为缺失字体，设计会被渲染成无衬线字体。因此我需要把SVG导出为路径，但这样文本就不再具备文本属性了。请问是否可以实现类似<path class="cls-1" text="A" d="M..."/>的效果，把渲染后的路径当作字母/字符来处理？

• 自定义属性存储文本元数据：你可以给<path>元素添加自定义数据属性（比如data-text）来关联对应的字符内容，示例代码如下：

  <path class="cls-1" data-text="A" d="M10,20 L30,40 ..."/>
  

  这种属性不会影响SVG的渲染效果，但可以通过JavaScript读取，满足后期文本提取、交互等需求。不过浏览器本身不会将该路径识别为文本字符，无法直接执行选中复制、文本搜索这类原生文本操作。

• 嵌入字体替代路径转换（推荐）：如果希望同时保留设计精度和文本属性，更优的方案是在SVG中嵌入字体文件，而非转成路径：

  1. 将目标字体文件（TTF/OTF格式）转换为Base64编码。
  2. 在SVG的<defs>标签内添加<style>块，通过@font-face引入嵌入字体：

     <defs>
       <style type="text/css">
         @font-face {
           font-family: 'YourCustomFont';
           src: url('data:font/ttf;base64,[替换为你的字体Base64编码]') format('truetype');
           font-weight: 600;
           font-style: normal;
         }
         .header-text {
           font-family: 'YourCustomFont';
           letter-spacing: 0.3px;
           /* 其他样式设置 */
         }
       </style>
     </defs>
     <text class="header-text" x="20" y="60">信头文本内容</text>
     

  这样客户无需安装字体，浏览器就能精准渲染设计风格，同时文本依然保留可选中、可编辑的原生属性。

• 路径+隐藏文本混合方案：如果必须使用路径，又需要保留文本可交互性，可以在路径下方放置一个完全透明的文本元素，确保两者位置完全对齐：

  <text x="20" y="60" fill="transparent" class="header-text">A</text>
  <path class="cls-1" d="M10,20 L30,40 ..."/>
  

  视觉上显示的是路径效果，用户却可以选中透明的文本进行复制，兼顾设计精度和文本属性。

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