将 SVG 导入 HTML

Question

我对 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>

如有任何帮助，我们将不胜感激。

Answer 1

你现在正在做的是获取 SVG 内容，像这样：

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

然后将其复制并粘贴到 HTML 中，浏览器无法理解。

相反，您应该使用类似这样的方式链接到 SVG 文件（尽管根据托管方式可能需要调整相对路径）：

<img src="{{violin_file}}">

如果你真的想把它嵌入到代码中（我一般不推荐这样做），你可以对其进行Base64编码并嵌入，就像这样：

import base64

with open(violin_file, "rb") as image_file:
    violin_base64 = str(base64.b64encode(image_file.read()),'utf-8')

然后你会做：

而不是 {{violin_txt}}

<img src="data:image/svg+xml;base64,{{violin_base64}}" />

将 SVG 导入 HTML

Importing SVG into HTML

html

python

svg