将SVG导入HTML后文本乱码、部分字母被替换问题求助

问题核心原因 #

你遇到的字母替换类乱码（如P变2、g变C）是典型的SVG子集字体映射冲突问题：

• 你生成的SVG为了压缩体积，使用了自定义子集字体，字符编码不是标准Unicode映射，独立打开SVG时会调用内嵌的字体表正常渲染
• 嵌入HTML后，全局字体规则覆盖了SVG的字体设置，或者SVG内嵌字体未正常加载，浏览器用系统标准字体解析自定义编码，就会出现字符错乱
• 同时存在Python文件读取编码错误、模板转义、HTML结构不规范三个次要诱因

具体修复步骤 #

1. 修复SVG字体依赖（最核心） #

二选一即可：

• 无依赖方案：用Inkscape/Adobe Illustrator打开SVG文件，选中所有文本元素，执行「转换为路径」操作，保存后再嵌入HTML，文本会变成矢量路径，完全消除字体依赖
• 保留文本方案：打开SVG源码，删除所有内嵌的@font-face自定义字体代码，给所有<text>标签添加样式：style="font-family: Georgia, Times, 'Times New Roman', serif;"，和HTML全局字体保持一致

2. 修正Python文件读取编码 #

读取SVG时明确指定UTF-8编码，避免操作系统默认编码导致读取异常：

# violin部分修改
if args['--violin']:
    # 新增encoding参数
    violin_file = open(args['--violin'], 'r', encoding='utf-8')
    violin_txt = violin_file.read()
    violin_hide = ''
else:
    violin_txt = ''
    violin_hide = 'hidden'

# metagene reads部分同步修改
if args['--metagene_reads']:
    metagene_reads_file = open(args['--metagene_reads'], 'r', encoding='utf-8')
    metagene_reads_txt = metagene_reads_file.read()
    metagene_reads_hide = ''
else:
    metagene_reads_txt = ''
    metagene_reads_hide = 'hidden'

3. 关闭模板的自动转义 #

如果使用Jinja2类模板引擎，默认会转义HTML特殊字符，导致SVG结构损坏，需要给SVG变量添加safe过滤器，标记为原生内容不需要转义：

<br>
{{metagene_reads_txt|safe}}
<br>
<!-- 其他两个SVG变量同步修改 -->
{{metagene_peaks_txt|safe}}
<br>
{{violin_txt|safe}}
<br>

4. 补全规范HTML结构 #

你当前的HTML缺失<head>标签，meta charset、样式、外部资源都直接写在<h1>后，不符合规范容易导致样式加载异常，修正为：

<!DOCTYPE html>
<html>
<head>
<!-- 明确指定页面编码 -->
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.css">
<style>
/* 原有样式代码保持不变 */
td {
  text-align: center;
  vertical-align: middle;
}
h1 {
  font-size: 36px;
  font-weight: bold;
  font-family: Georgia, Times, "Times New Roman", serif;
}
h2 {
  font-size: 24px;
  font-family: Georgia, Times, "Times New Roman", serif;
}
h3 {
  margin-bottom: 0px;
  padding: 0px;
  margin-left: 300px;
  font-size: 24px;
  font-family: Georgia, Times, "Times New Roman", serif;
}
.initiallyHidden { display: none; }
.toggle {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- 原有页面内容保持不变 -->
</body>
</html>

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