0

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">&#68;ownload</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);

1 件の回答 1

0

addsvg.jsを下記のコードに変更したら上手く動作しました。

変更前

 const newDiv = document.createElement("svg");

変更後

const newDiv = document.createElementNS("http://www.w3.org/2000/svg", "svg");

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。