読者です 読者をやめる 読者になる 読者になる

cocuh's note

type(あうとぷっと) -> 駄文

svgでつまらないことに躓いたこと

svg

svgに動的に生成したelementを追加しようとしてなんかつまらないことで躓いたのでメモしておきます。
つまらなすぎて辛かったので勢いで書いた記事です。

<?xml version="1.0" encoding="utf-8"?>
<svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        version="1.1"
        onload="main()"
        id="svg"
        >
    <script xlink:href="main.js"/>
</svg>
  • main.js
svg = document.getElementById('svg');
var xmlns = "http://www.w3m.org/2000/svg";

SVGObj = function(elem){
    this.elem = elem;
    this.setAttribute = function(key, value){return this.elem.setAttributeNS(null, key, value)};
};

utils = {};
utils.createElement = function(tagname){
    var elem= document.createElementNS(xmlns,tagname);
    var obj = new SVGObj(elem);
    var res = function(){return obj.elem};
    res.__proto__ = obj;
    return res;
};


test1 = function(){
    var r = document.createElementNS(xmlns,'rect');
    r.id = 'testchan'
    r.setAttributeNS(null,'width',100);
    r.setAttributeNS(null,'height',100);
    document.documentElement.appendChild(r)
}


test2 = function(){
    var rect = utils.createElement('rect');
    rect.elem.id = 'rect';
    rect.setAttribute('x',100);
    rect.setAttribute('y',100);
    rect.setAttribute('width',100);
    rect.setAttribute('height',100);
    rect.setAttribute('fill','red');
    document.documentElement.appendChild(rect());
    
};


main = function(){
    test1()
    test2()
};

これを実行しても何も表示されません。
でも、developper toolsにはdomは生成されているのは確認できて、document.getElementById('rect')をしたら取得できます。

答えはcreateElementした時の名前空間

var xmlns = "http://www.w3m.org/2000/svg";

w3m.orgってなんじゃああああああブラウザじゃないんだよおおおおお


そんな感じで1時間潰したわけでした。ちゃんちゃん。