JabaScriptとSVGでグラフィックを作るsvgDraw.jsを、ちょっと作ってみた。
poemlプロジェクトの一環です。
めっさプロトタイプチェーン。jQuery式ですな。
まだ四角形しか書けないが。
また、この仕様だとSVGアニメーションが作れない。
HTMLサンプル。(uupaa.js - http://code.google.com/p/uupaa-js/ 使用。)
<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="Content-Script-Type" content="application/javascript"/> <style> #svgCanvas{border:solid red 1px;} </style> <script src="../../lib/uupaa.js"></script> <script src="svgDraw.js"></script> <!--<script src="../../lib/jquery.js"></script>--> <script> uu.ready(function(){ svgDraw(document.getElementById("svgCanvas")).width(500).height(500).fill("#fff").rect({width:500, height:500}).stroke("blue").fill("orange").rect({x:100, y:50, width:50, height:100}); }, "D"); </script> <title>svgDraw.js</title> </head> <body> <div id="svgCanvas"></div> </body> </html>
以下svgDraw.js 0.1.1。
/* * c4se project * svgDraw.js 0.1.1 * * 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", svg: document.createElementNS(this.ns, "svg"), style: {stroke:"#000", fill:"#000"}, make: function(node){ node.appendChild(document.createElementNS(this.ns, "svg")); this.svg = node.lastChild; return this; }, width: function(num){ this.svg.setAttribute("width", num); return this; }, height: function(num){ this.svg.setAttribute("height", num); return this; }, stroke: function(color){ this.style.stroke = color; return this; }, fill: function(color){ this.style.fill = color; return this; }, rect: function(hash){ var style = c4sey.mixin({x:0, y:0, width:10, height:10, stroke:this.style.stroke, fill:this.style.fill}, hash); var rect = document.createElementNS(this.ns, "rect"); for(var prop in style) rect.setAttribute(prop, style[prop]); this.svg.appendChild(rect); 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; };
以上。
(ちなみに更に作り次いで、textまでは普通に入れられるようになっている。)