70741


htmlに外部ファイルからsvgを読み込みたくて、jsファイルのオブジェクトに文字列としてsvgを格納してhtmlに追加する方法を考えたのですが、上手く動作しません。body直下にsvgを置いているので上部に空白出来るはずなのですが、出来ないです。  
見ていただけないでしょうか？

## index.html

[code]

    <!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>
    
[/code]

## object-svg.js

[code]

    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
            }, '')
            
        } 
        
    }
    
[/code]

## addsvg.js

[code]

    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);
    
[/code]


CC BY-SA 4.0
2020-09-27T01:52:10.067
70740
2020-09-27T01:58:51.320
22565
question
javascript html svg
javascriptのオブジェクトにsvgを文字列で格納してhtmlに追加する方法


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

変更前

[code]

     const newDiv = document.createElement("svg");
    
[/code]

変更後

[code]

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


CC BY-SA 4.0
2020-09-27T01:58:51.320
70741
2020-09-27T01:58:51.320
22565
70740
answer