SVGのオブジェクトをjQueryを使ってアニメーションさせてみた

Tweet: July 18th, 2013

HTML5からサポートされているInline SVG（インラインSVG）を、JavaScript (jQuery)を使っていろいろ試してみたのでメモしておきます。

document.createElementNS

SVGのオブジェクトを生成する場合は「document.createElementNS」を使って生成する。

var svgns = 'http://www.w3.org/2000/svg'; // SVGの名前空間
var svg = $(document.createElementNS(svgns, 'svg'));

svgタグはインライン要素

Firefoxだとインライン要素の場合、オブジェクトの横幅が上手く取得できないので、ブロック要素にして取得する。

var svgns = 'http://www.w3.org/2000/svg';
var svg = $(document.createElementNS(svgns, 'svg'));
svg.appendTo($('div#hoge')); // div#hogeにSVGタグを追加
svg.attr({width:'100%', height:100}); // SVGに幅と高さを指定
svg.css('display', 'block'); // ブロック要素に変更
console.log(svg.width());

参考サイト

Tweet: July 18th, 2013

Related Posts?

アニメーション

Bookmark