36949


htmlにあらかじめ書かれている、要素は表示されるのに、  
jsで追加した要素は表示されません。  
ブラウザのデベロッパーツール上では同じような表記になっているようなのですが。

[![画像の説明をここに入力](https://i.stack.imgur.com/tj1hm.png)](https://i.stack.imgur.com/tj1hm.png)

[HTML]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Practice</title>
         <link rel="stylesheet" href="styles.css">
         <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
         <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
         <script src="scripts.js"></script>
    </head>
    <body>
        <svg viewBox="0 0 200 200">
        <polygon points="50,50 150,50 150,150" stroke="black" stroke-width="1" fill="lightgreen"/>
    </svg>
    </body>
    </html>
    
[/code]

[js]

[code]

    $(function() {
            var svg = $('svg')
                var pol = $('<polygon points="50,50 150,50 150,150" stroke="black" stroke-width="1" fill="lightgreen">');
                svg.prepend(pol)
            });
    
[/code]


CC BY-SA 3.0
2017-08-04T12:27:22.397
36947
2017-08-04T13:15:25.920
2017-08-04T13:00:26.643
12297
12297
question
html jquery svg
jsで挿入したhtmlの<polygon>要素が表示されない


[イラストレーターでSVGに書き出したベジェ曲線を、HTML内で使える形式に変換したい](https://ja.stackoverflow.com/a/36462/4236)と全く同じです。`<svg>`ではHTML名前空間に作られたタグに過ぎず、SVG画像であるとは認識されません。

[名前空間の速修講座](https://developer.mozilla.org/ja/docs/Web/SVG/Namespaces_Crash_Course)などを参考に修正する必要があります。jQueryを使用するのであれば、対応する記述が必要です。


CC BY-SA 3.0
2017-08-04T13:02:32.220
36948
2017-08-04T13:02:32.220
4236
36947
answer


jQueryオブジェクトを生成するAPIのひとつである[jQuery(html [, ...]
)](http://api.jquery.com/jquery/#jQuery2)は、テキストを _raw HTML_ として扱う仕様です。

> ### jQuery( html [, ...] ) Returns: jQuery
>
> Description: Creates DOM elements on the fly from the provided string of
> **raw HTML**.
>
>   * html  
>  Type: htmlString  
>  A string of HTML to create on the fly. **Note that this parses HTML, not
> XML.**
>

具体的には、次のような結果を生じます。

[code]

    const jqEl = $('<polygon>');
    const domEl = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    
    // jQueryはHTMLと解釈
    console.assert(jqEl[0].namespaceURI === 'http://www.w3.org/1999/xhtml');
    
    // 本来ならば次が期待される
    console.assert(domEl.namespaceURI === 'http://www.w3.org/2000/svg');
    
[/code]

XML名前空間についてご存じなければ、[名前空間の速修講座](https://developer.mozilla.org/ja/docs/Web/SVG/Namespaces_Crash_Course)などを参照してご確認ください。

以下、参考のためにDOMによる操作を例示します。どうしてもjQueryを用いる場合は独自の拡張が必要かとおもわれます。その場合は別途質問していただきたいですが、あまり効果的でないのでおすすめはしません。

[code]

    const $svg = document.querySelector('#target');
    
    const $el = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    $el.setAttributeNS(null, 'points', '50,50 150,50 150,150, 50,150 125,75 150,150');
    $el.setAttributeNS(null, 'stroke', 'black');
    $el.setAttributeNS(null, 'fill', 'lightgreen');
    $svg.appendChild($el);
[/code]

[code]

    <svg id="target" viewBox="0 0 200 200"></svg>
[/code]


CC BY-SA 3.0
2017-08-04T13:09:05.743
36949
2017-08-04T13:15:25.920
2017-08-04T13:15:25.920
36947
answer