svgDraw.jsを書き直してる。
前のver 0.1.1では、タグを入れ子にすることすらできなかった。
↓(前回)↓
svgDraw.jsをちょっと作る
http://d.hatena.ne.jp/Kureduki_Maari/20081216/1229424827
ちょっと直すつもりが、ちょっと変えたら動かなくなったので、ほっぽりだし(当時)。今頃になって引っ張り出す。発想が変わってて、書き直し……。
versionは0.2.1になるみこみ。
ちなみに。
ver0.1.2は未公開だったので。以下。
/* * c4se project * svgDraw.js 0.1.2 - 20081214 * * project name: poeml - poems in electrocity * project page: http://c4se.sakura.ne.jp/bi_laboratory/poeml/poeml.html * project leader: Siki Asai * lunatic_faily@yahoo.co.jp * http://c4se.sakura.ne.jp/si_index.html * script author: Nemu Inoue * utakata.c4se@gmsil.com * http://c4se.sakura.ne.jp/ne_index.html * * ==License * <NYSL Version 0.9982> * http://www.kmonos.net/nysl/readme.html * ---------------------------------------- * A. 本ソフトウェアは Everyone'sWare です。このソフトを手にした一人一人が、 * ご自分の作ったものを扱うのと同じように、自由に利用することが出来ます。 * A-1. フリーウェアです。作者からは使用料等を要求しません。 * A-2. 有料無料や媒体の如何を問わず、自由に転載・再配布できます。 * A-3. いかなる種類の 改変・他プログラムでの利用 を行っても構いません。 * A-4. 変更したものや部分的に使用したものは、あなたのものになります。 * 公開する場合は、あなたの名前の下で行って下さい。 * B. このソフトを利用することによって生じた損害等について、作者は * 責任を負わないものとします。各自の責任においてご利用下さい。 * C. 著作者人格権は ○○○○ に帰属します。著作権は放棄します。 * D. 以上の3項は、ソース・実行バイナリの双方に適用されます。 * * ==What's this? * You can draw easyly SVG by JavaScript by this 'svgDraw.js'. * Those graphics are drawn without using Microsoft VML, Adobe Flash, Sun Java, JavaScript canvas. */ (function(){ var svgDraw = window.svgDraw = function(node){ return svgDraw.fn.make(node); }; svgDraw.fn = svgDraw.prototype = { _className: "svgDraw", ns: "http://www.w3.org/2000/svg", xlinkns: "http://www.w3.org/1999/xlink", svg: document.createElementNS(this.ns, "svg"), style: { fill:"#000", opacity:1.0, stroke:"#000", "stroke-width":1, "stroke-opacity":1.0 }, make: function(node){ node.appendChild(document.createElementNS(this.ns, "svg")); this.svg = node.lastChild; return this; }, createTagNS: function(ns, elem, attrHash){ var tag = document.createElementNS(ns, elem); for(var prop in attrHash) tag.setAttribute(prop, attrHash[prop]); return tag; }, width: function(num){ this.svg.setAttribute("width", num); return this; }, height: function(num){ this.svg.setAttribute("height", num); return this; }, viewBox: function(nums){ this.svg.setAttribute("viewBox", nums); return this; }, /*layerids: [], layer: function(name){ var g = createElementNS(this.ns, "g"); g.setAttribute("class", "layer"); g.setAttribute("id", "ylayer_"+name); layerids.push(name); },*/ fill: function(color){ this.style.fill = color; return this; }, opacity: function(num){ this.style.opacity = num; return this; }, stroke: function(color){ this.style.stroke = color; return this; }, stroke_width: function(num){ this.style["stroke-width"] = num; return this; }, stroke_opacity: function(num){ this.style["stroke-opacity"] = num; return this; }, rect: function(hash){ var style = c4sey.mixin({x:0, y:0, width:10, height:10, rx:0, ry:0}, hash); style = c4sey.mixin(style, this.style); this.svg.appendChild(this.createTagNS(this.ns, "rect", style)); return this; }, circle: function(hash){ var style = c4sey.mixin({cx:10, cy:10, r:10}, hash); style = c4sey.mixin(style, this.style); this.svg.appendChild(this.createTagNS(this.ns, "circle", style)); return this; }, ellipse: function(hash){ var style = c4sey.mixin({cx:20, cy:10, rx:20, ry:10}, hash); style = c4sey.mixin(style, this.style); this.svg.appendChild(this.createTagNS(this.ns, "ellipse", style)); return this; }, line: function(hash){ var style = c4sey.mixin({x1:0, y1:0, x2:"100%", y2:"100%"}, hash); style = c4sey.mixin(style, this.style); this.svg.appendChild(this.createTagNS(this.ns, "line", style)); return this; }, polyline: function(hash){ var style = c4sey.mixin({points:"0,0 100%,0 100%,100%"}, hash); style = c4sey.mixin(style, this.style); this.svg.appendChild(this.createTagNS(this.ns, "polyline", style)); return this; }, poligon: function(hash){ var style = c4sey.mixin({points:"0,0 100%,0 100%,100%, 0,100%"}, hash); style = c4sey.mixin(style, this.style); this.svg.appendChild(this.createTagNS(this.ns, "poligon", style)); return this; }, text: function(str, hash){ var style = c4sey.mixin({x:0, y:0, "font-size":"12pt", "font-family":"serif", "font-weight":"normal", "font-style":"normal", "font-decoration":"none", "word-spacing":"1em", "letter-spacing":1, "text-anchor":"start"}, hash); style = c4sey.mixin(style, this.style); var text = this.createTagNS(this.ns, "text", style); text.appendChild(document.createTextNode(str)); this.svg.appendChild(text); return this; }, path: function(hash){ var style = c4sey.mixin({d: ""}, hash); style = c4sey.mixin(style, this.style); this.svg.appendChild(this.createTagNS(this.ns, "path", style)); return this; } }; })(); // ========== end <svgDraw.js> ========== try{ c4sey; }catch(e){ c4sey = {}; } c4sey.mixin = function(hash1, hash2){ for(var prop in hash2) hash1[prop] = hash2[prop]; return hash1; };
0.1.1からは、機能を増やしただけ。この段階ではまだ動くはずである。
ちょっとしたSVGなら充分実用的、かも、しれない。