- svgElementオブジェクトを生成し，htmlElementにappendChildする．
素朴な記述法で，コードが長くなりがち．svgの内容を後から操作する必要があるなら，domオブジェクトを保持できるこちらのほうが便利だ． - svgのソースコードを生成し，innerHTMLに挿入する．
svg要素全体をテキストとして記述してしまうのがミソ．svgを作りきった後何もしないのであれば，svg要素の構造が見通しやすいこちらがお勧め．
なお，svg要素の中身を取り出したい場合は，svg要素を含んでいるhtml要素のinnerHTMLを参照し，そこから<svg>〜</svg>の範囲を切り出すと良い．
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
window.onload = function(){
//1の方法
var NS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(NS, "svg");
svg.setAttribute("viewBox", "0 0 200 200");
svg.style.width = "150px";
svg.style.width = "150px";
var path = document.createElementNS(NS, "path");
path.setAttribute("d", "M 0 0 h 200 v 200 h -200 z");
path.setAttribute("fill", "red");
svg.appendChild(path);
document.body.appendChild(svg);
//2の方法
document.body.innerHTML
+= '<svg width="150px" height="150px" viewBox="0 0 200 200">'
+ '<path d="M 0 0 h 200 v 200 h -200 z" fill="blue"/>'
+ '</svg>';
};
</script>
</head>
<body>
</body>
</html>
投稿
0 件のコメント:
コメントを投稿