GWTでSVGを書く

概要
    GWTからSVGを描画するには、複数種類のライブラリが存在している。
    今回はその中で、lib-gwt-svg-0.5.2 を使ってみた。
    Raphaël をGWTから使ったライブラリ 
    http://code.google.com/p/raphaelgwt/

    とかもあったんだけど、これはRaphaël.jsに依存する。
    管理するものが増えるので、できれば無いものを、、と探していたら、
    あった。

    LIB-GWT-SVG
    http://www.vectomatic.org/lib-gwt-svg


    更新頻度もごく最近まであり、バージョンも順調に上がってるみたい。

    動作してるサンプルのコードも見れる。
    http://www.vectomatic.org/gwt/lib-gwt-svg-samples/lib-gwt-svg-samples.html

    JavaDocもある。
    http://www.vectomatic.org/mvn-sites/lib-gwt-svg/apidocs/?org/vectomatic/dom/svg/OMNode.html

    じゃ、これで。


ダウンロード
    http://code.google.com/p/lib-gwt-svg/
    から、lib-gwt-svg-0.5.2.jar をDL。

    特に頑張らない。




プロジェクトへの組み込み
    DLした	lib-gwt-svg-0.5.2.jar　を、
    適当にソースファイルの近所にlibフォルダとか作っておいておく。

    Eclipseなどを使っている場合は、
    EclipseのPackageExplorerから、ライブラリを右クリック >
    	Build Path >  Add To Build Path とか押す。
        

    これで、ビルド時に lib-gwt-svg-0.5.2.jar が参照されるようになる。
    プロジェクト.gwt.xmlへと、インヘリットの記述を追加する

        <inherits name="org.vectomatic.libgwtsvg"/>

    以上。


Usage
    下地
        HTML svgContainer;
        OMSVGSVGElement svg;
        OMSVGDocument doc;

        svgContainer = new HTML();

        RootPanel.get().add(svgContainer);
        doc = OMSVGParser.currentDocument();
        svg = doc.createSVGSVGElement();
        svgContainer.getElement().appendChild(svg.getElement());


    適当に円
        OMSVGCircleElement drawCircle = doc.createSVGCircleElement(90, 90, 100);
        svg.appendChild(drawCircle);


    文字列
	OMSVGTextElement text = doc.createSVGTextElement(37,145,OMSVGLength.SVG_LENGTHTYPE_PX, "ウェヒヒ");
        text.getStyle().setSVGProperty(SVGConstants.CSS_FILL_PROPERTY,SVGConstants.CSS_RED_VALUE);
        text.getStyle().setSVGProperty(SVGConstants.CSS_STROKE_PROPERTY,SVGConstants.CSS_BLACK_VALUE);
        text.getStyle().setSVGProperty(SVGConstants.CSS_STROKE_WIDTH_PROPERTY, "10");
        text.getStyle().setSVGProperty(SVGConstants.CSS_FONT_SIZE_PROPERTY, "130");

        svg.appendChild(text);		

    円の処理の下とかに書けば出ると思う。
    

可能性を感じている所
    大抵のブラウザはもうSVG力(えすゔいじーりょく)高い
    http://caniuse.com/#search=svg




以上。