【发布时间】：2021-12-01 12:11:22
【问题描述】：
我对 HTML 很陌生...昨天才开始。我遇到的问题是，当我将 SVG 导入到我的 HTML 脚本中时，文本会被堵住。例如，Peak Metagene Plot 变为 2eak MetaCene 2lot。这几乎就像某些字母被改变了。
我制作了一个 python 脚本来读取这样的 SVG 文件（我在这里调用两个 SVG，violin 和 metagene_reads）：
# violin
if args['--violin']:
violin_file = open(args['--violin'], 'r')
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')
metagene_reads_txt = metagene_reads_file.read()
metagene_reads_hide = ''
else:
metagene_reads_txt = ''
metagene_reads_hide = 'hidden'
然后我使用此代码输入 HTML 模板。在不粘贴整个代码的情况下，我只会列出给我奇怪文本的内容：
指定字体类型...
<!DOCTYPE html>
<html>
<h1><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;
}
....其他内容，如表格等
下面是我导入从 python 脚本调用的 SVG 的地方（代码如上所示）。这就是我遇到奇怪的格式问题的地方。
<br>
{{metagene_reads_txt}}
<br>
<h2 {{metagene_peaks_hide}}><center>MultipleMetagene Peaks Plot</center></h2>
<p {{metagene_peaks_hide}}>
<br>
<button class="toggle" onclick="metagenePeaks()">Click to learn more</button>
<div id="metagenePeaksID" class="initiallyHidden">
The multiple metagene peaks plot illustrates the average peak coverage of 5' UTR, CDS, and 3' UTR features.
</div>
<script>
function metagenePeaks() {
var x = document.getElementById("metagenePeaksID");
display = x.style.display;
x.style.display = (display && display !== 'none') ? 'none' : 'block';
}
</script>
<br>
{{metagene_peaks_txt}}
<br>
<h2 {{violin_hide}}><center>Gene Count Violin Plot</center></h2>
<p {{violin_hide}}>
<br>
<button class="toggle" onclick="violinFunction()">Click to learn more</button>
<div id="violinDIV" class="initiallyHidden">
The violin plot illustrates the distribution of gene counts for each sample. The gene counts were normalized for differences in library depth and log transformed.
</div>
<script>
function violinFunction() {
var x = document.getElementById("violinDIV");
display = x.style.display;
x.style.display = (display && display !== 'none') ? 'none' : 'block';
}
</script>
<br>
{{violin_txt}}
<br>
</p>
</body>
</html>
任何帮助将不胜感激。
【问题讨论】：