カテゴリー別アーカイブ: SVG

SVGElementにclass属性を設定する

HTMLElementにclass属性を設定するときは, classNameプロパティやclassListプロパティにアクセスして設定します.

var div = document.createElement('div');
div.className = 'section-lv1';
div.classList.toggle('active');

SVGElement(やそれを継承したSVGの要素)に対して, その方法で設定しようとしても設定されません. では, どうすればいいかと言うと, setAttributeメソッドを利用します (逆に, HTMLElementでclass属性をsetAttributeメソッドで設定するのはタブーです).

var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('class', 'rect');

SVGで画像を動的に描画する

SVGで画像を動的に描画するには,

  • innerHTMLを利用する
  • createElementNS + appendChildを利用する

以上の2つの方法があります.

innerHTMLを利用する場合は, 特に解説は必要ないかと思いますので, createElementNS + appendChildを利用する方法を解説します.

var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');

image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'sample.png');

image.setAttributeNS(null, 'x',  x);
image.setAttributeNS(null, 'y',  y);
image.setAttributeNS(null, 'width',  64);  
image.setAttributeNS(null, 'height', 64);

document.querySelector('svg').appendChild(element);

ポイントは属性が名前空間付き属性であるということです. したがって, setAttributeではなく, setAttributeNSを利用する必要があります.

SVG 動的に要素を追加する

SVGにJavaScriptで動的に要素を追加する場合, HTMLElementのように, document.createElementメソッドで要素を作成し, DOMツリーに追加する方法ではうまくいきません

var text = document.createElement('text');

text.setAttribute('x', 10);
text.setAttribute('y', 10);
text.textContent = 'sample';

var svg = document.querySelector('svg');

svg.appendChild(text);

この問題は, 要素を作成するときに名前空間を指定できるdocument.createElementNSメソッドを利用することで解決できます.

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

text.setAttribute('x', 10);
text.setAttribute('y', 10);
text.textContent = 'sample';

var svg = document.querySelector('svg');

svg.appendChild(text);

第1引数にSVGの名前空間を指定し, 第2引数にSVGのタグ名を指定するだけです.

参考 : document.createElementNS

Canvas / SVG テキストアラインメント

備忘録的に…

Canvas

var canvas   = document.createElement('canvas');
var context = canvas.getContext('2d');

context.textAlign = 'center';  //センタリング
context.textAlign = 'left';       //左寄せ (言語の種類に依存しない)
context.textAlign = 'right';     //右寄せ (言語の種類に依存しない)

 SVG

<text text-anchor="middle"  ...> ... </text>  <!-- センタリング -->
<text text-anchor="start"  ...> ... </text>  <!-- 左寄せ -->
<text text-anchor="end"  ...> ... </text>  <!-- 右寄せ -->

canvgをIEで利用するときの注意点

昨日の記事でSVGをラスター画像に変換するJavaScriptのライブラリ, canvgを紹介を紹介しましたが, IEで利用する場合の注意点です.

SVGのタグに, xmlns属性を指定しないと, SVG画像として表示されない

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> ...

ところが, このxmlns属性がきちんと記述されているSVGをcanvgでラスター画像に変換しようとすると, IEではDOMParserインスタンスのparseFromStringメソッドでエラーが出てしまいます.

したがって, 変換の直前などに取り除くようにしましょう.

canvgは, ExplorerCanvasを利用することで, IE7やIE8でも使えます. ほんとにすごい…

 

JavaScriptでSVGをラスター画像に変換

canvgというライブラリを利用すればとても簡単に, SVGをラスター画像に変換可能です. 方法としては, HTML5 Canvasを利用してラスター画像に変換しているようです.

1. まずは必要なライブラリを読み込んでおきます.

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>

あとは, ライブラリが定義するcanvg関数を呼び出すだけです.

第1引数には, <canvas>のid属性か, document.createElement(‘canvas’) などで取得した, HTMLCanvasElementオブジェクトを指定します.

第2引数には, SVGの画像ファイルのパスか, SVGの文字列を指定します.

第3引数は, オプションです. 詳細はこちらを参照してください.

var canvas = document.createElement('canvas');

canvg(canvas, 'sample.svg');

あとは, HTMLCanvasElementオブジェクトのtoDataURLメソッドを利用することで, ラスター画像をData URLとして取得できます.

canvas.toDataURL('image/png');
canvas.toDataURL('image/gif');

//...etc

また, 簡単なオプションを指定することで簡単なアニメーションも変換可能です. ほんとにすごい…