2013年06月03日

SVGの問題解決!

今日は長い間(1週間)悩んでいた問題が解決しました。
cloocaのダイアグラムエディタはSVGで実装しているのですがで、ユーザ定義のSVG形状を表示したいと思いまして、

<symbol id="svg1" viewBox="0 0 320 320" >
ここにSVG
</symbol\>


として、ダイアグラム上にノードを追加する処理のところで、これを使うように「useタグ」を動的に生成します。


var use = document.createElementNS(SVG,'use');
use.setAttribute("href", "#svg1");
use.setAttribute("x", x);
use.setAttribute("y", y);
svg.appendChild(use);


しかし上のようにしても、全然表示されない。
そこで、「document.createElementNS(SVG,'use');」で検索すると、ちょうどいいのが引っかかりました。
http://blog.harapeko.jp/2012/08/10/svguseelement/



var xlinkns = "http://www.w3.org/1999/xlink";
var use = document.createElementNS(SVG,'use');
use.setAttributeNS(xlinkns, "href", "#svg1");
use.setAttribute("x", x);
use.setAttribute("y", y);
svg.appendChild(use);


xlink:hrefだから、xlinkを設定しないといけなかった。
タグ:SVG
posted by Syuhei Hiya at 02:24| Comment(0) | TrackBack(0) | 日記
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/68749856
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
Powered by さくらのブログ