SVGの基礎知識

1、cycle(1)cx cy r(2)fill stroke-width transparent(3)style方式2、rect(1)width height x y(2)rx ry 3、line(1)x 1 x 2 y 1 y 2(2)stroke-opacity
4、ラベルはコンテナラベルで、要素を組み合わせる(1)stroke fillなどのすべてのグラフィックに共通する属性(2)にのみ機能しますが、各グラフィック特有の属性にはラベルは使用できませんが、transform:tanslate(0,0)を使用して平行移動を実現できます.

5、ラベルsvgにテキスト(1)x y text-anchor 6、ラベル(1)x y widht height(2)xlink:href 7、SVGラベルの作成

var svgNS='http://www.w3.org/2000/svg'
var oSVG=document.createElementNS(svgNS,'svg');
oSVG.setAttribute('xmls',svgNS);
oSVG.setAttribute('width':100%);
oSVG.setAttribute('height':100%);
var parent=document.getElementById('');
parent.appendChild(oSvg);

8、一つのSVGタグパッケージを作成する

var svgNS='http://www.w3.org/2000/svg'
    var oSVG=document.getElementById("svgContent");
    function createTag(tag,objectAttributes){
        var tag=document.createElementNS(svgNS,tag);
        for(var key in objectAttributes){
            // tag[key]=objectAttributes[key];
            tag.setAttribute(key,objectAttributes[key])
        }
        return tag;
    }
    var svg=createTag('svg',{
        "xmlns":"svgNS",
        "width":"100%",
        "height":"100%"
    });
    var g=createTag('g',{
        "style":"cursor:pointer"
    })
    var line1=createTag('line',{
        "x1":"100",
        "y1":"100",
        "x2":"390",
        "y2":"200",
        "stroke":"#ACD2DE"
    })
    var line2=createTag('line',{
        "x1":"100",
        "y1":"100",
        "x2":"390",
        "y2":"200",
        "stroke":"transparent",
        "stroke-width":"6",
    })
    var rect=createTag('rect',{
        "x":"235",
        "y":"140",
        "width":"20",
        "height":"20",
        "fill":"#999",
        "rx":"5"
    })
    var text=createTag("text",{
        "x":"245",
        "y":"157",
        "fill":"white",
        "font-size":"20",
        "text-anchor":"middle"
    })
    oSVG.appendChild(svg);
    svg.appendChild(g);
    text.innerHTML="?";
    g.appendChild(line1);
    g.appendChild(line2);
    g.appendChild(rect);
    g.appendChild(text);

9、折れ線polyline:折れ線point:スペース(カンマ)で座標点10を隔て、パスラベルpathで座標点を描くことで所望の図形を形成し、-d属性M L H V A Z C S Q T M(始点位置、経路内で再設定されている場合は新しい始点)L(終点位置、経路内で再設定されている場合は延長し続ける)Z(閉位置、M L構成経路内に存在する場合はZ前面の経路が閉じる)H(水平描画、例えばM 50 100 H 200、Hは座標値を1つしか書かない.水平描画Y座標は既知であるに違いない.V同理)小文字に置き換えると、直前の操作点に対する相対座標である.A(円弧x半径を描く:Y半径:角度:円弧長:(0小弧、1大弧)方向:(0反時計回り、1時計回り)終点X座標:終点Y座標:)