我對 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>
任何幫助將不勝感激。
uj5u.com熱心網友回復：
您現在正在做的是獲取 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}}" />
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312316.html
上一篇：SVG路徑滑鼠懸停不適用于傳單