htmlに外部ファイルからsvgを読み込みたくて、jsファイルのオブジェクトに文字列としてsvgを格納してhtmlに追加する方法を考えたのですが、上手く動作しません。body直下にsvgを置いているので上部に空白出来るはずなのですが、出来ないです。
見ていただけないでしょうか?
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YT Download</title>
<link rel="stylesheet" href="styles/vendors/bootstrap-reboot.css" />
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<h1>YT Download</h1>
<form>
<input type="url" name="url01" size="18" placeholder="https://www.youtube.com/watch?v=">
<input type="submit" value="download">
<button class="button">
<!-- preserveAspectRatio viewboxに対しての設定-->
<svg class="background" preserveAspectRatio="none" viewBox="0 0 164 45">
<use xlink:href='#download'></use>
</svg>
<div class="label">Download</div>
<div class="success">Open file</div>
<svg class="progress" viewBox="0 0 164 32"></svg>
</button>
</form>
<script src="svgs/object-svgs.js"></script>
<script src="scripts/vendors/vue.min.js"></script>
<script src="scripts/addsvg.js"></script>
</body>
</html>
object-svg.js
const svgs = {
all: ['\
<defs>\
<symbol id="download" viewBox="0 0 164 45">\
<path d="M0 3C0 1.34315 1.33152 0 2.98838 0C15.6933 0 52.8204 0 82 0C111.114 0 148.441 0 161.007 0C162.664 0 164 1.34315 164 3V42C164 43.6569 162.657 45 161 45H3C1.34314 45 0 43.6569 0 42V3Z" />\
</symbol>\
</defs>\
'
],
returnAll: function() {
return this.all.reduce(function(sum, svg) {
return sum + svg
}, '')
}
}
addsvg.js
const svgAll = svgs.returnAll()
function addElement () {
// 新しい div 要素を作成します
const newDiv = document.createElement("svg");
// いくつかの内容を与えます
newDiv.innerHTML = svgAll;
// テキストノードを新規作成した div に追加します
//newDiv.appendChild(newDiv);
const h1 = document.getElementsByTagName('h1')[0];
document.body.insertBefore(newDiv, h1);
}
document.addEventListener('DOMContentLoaded', addElement);