svg.jsの使い方、エレメントや編集・参照する主なパラメータ一覧など

このエントリーをはてなブックマークに追加

svgをjavaScriptで操作しやすくなるライブラリ「svg.js」

https://github.com/svgdotjs/svg.js

CDNもあります
https://cdnjs.com/libraries/svg.js/

なかなか情報も少ないですが軽量と機能の豊富さに惹かれて使い始めました
使い方とか困った部分、解決した部分とかのメモです

svg.jsの使い方 目次

  • svg.jsで新規svgデータを作成
  • svg.jsでsvg図形データの追加
  • svg.jsで図形データの編集
  • svg.jsでクリックイベント
  • svg.jsで図形データの取得
  • 主なSVGエレメント
  • SVGを編集・参照する主なパラメータ
  • svg.jsの取得・変更する主な関数


サンプル動作に使ってるhtml

<div id="canvas"></div>

新規svgデータを作成

var testSvg = SVG('canvas').size( 100, 100);
図形アイテムを組み込みつつ新規svgデータを作成
  var canvas = SVG('canvas').size( 100,100),
rect = canvas.rect(100, 100).fill('yellow').stroke('black');
See the Pen svg.js sample by yochans (@yochans) on CodePen.

svg図形データの追加

新規作成と同時に図形も作成できますが、追加する場合も同様です
var circle = canvas.circle(100, 100).attr({ fill:'yellow','stroke':'black'});
SVGコードからも追加できます、インポート部分でもありますね
var circle = canvas.svg('<circle id="" fill="black" r="10" cx="50" cy="50"></circle>');
See the Pen svg.js new obj by yochans (@yochans) on CodePen.

svg図形データの編集

svg.jsではrect.fill('#f06')などシンプルな書き方が可能です
attr()での操作も可能です
rect.attr({ fill: 'green'});
See the Pen svg.js change color by yochans (@yochans) on CodePen.


svg図形データの取得

要素を取得・参照するのもattr()
stroke = rect.attr('stroke');
See the Pen svg.js Data acquisition by yochans (@yochans) on CodePen.


主なSVGエレメント

引数や役割svg.jsでの例
rect四角形幅と高さrect(100,100)
circle直径circle(50)
ellipse楕円直径(幅と高さ)ellipse(50,20)
line2つの座標line(10,10,50,50)
polyline図形座標のセットpolyline('0,0 100,50 50,100')
polygon図形座標のセット(自動閉じ)polygon('0,0 100,50 50,100')
path図形座標のセットpath('M10,10 L50,50 L30,20 Z')
image画像画像ファイルへのパスimage('image/sample.jpg')
textテキスト文字列text(’Hello World’)
tspanテキストtext1.tspan()
textPathテキストpathを付加する※要詳細text1.textPath()
gradientグラデーションgradientの作成※要詳細
patternパターンpatternの作成※要詳細
maskマスク※要詳細sample.mask().add(ellipse)
clipクリップ※要詳細
markerマーカーマーカーを付けたり

SVGを編集・参照する主なパラメータ

パラメータ意味補足
widthサイズ:横幅
rotate角度
x座標、x
y座標、y
cx座標x (circle)
cy座標y (circle)
r半径(circle)
fill描画色
fill-opacity描画色の透明度
stroke枠線の色
stroke-opacity枠線の透明度
stroke-width枠線の幅
stroke-linejoin枠線角の形状miter、round、bevel
stroke-linecap枠線両端の形状butt、round、square

追記中

svg.jsの取得・変更する主な関数

内容補足
move()エレメントのXY移動.move(x,y)
skew()傾斜角度.skew(0, 45)
scale()サイズ変更.scale(0.5,0.5)
flip()エレメントを反転させる.flip(’x’)左右反転
.flip(’y’)j上下反転
transform()transformでの取得や変更
rotation(回転)
x (x軸上の平行移動)
y (y軸上の平行移動)
skewX (x軸の傾斜角度)
scaleY (y軸の傾斜角度)
cx (x軸の中心)
cy (y軸の中心)
.transform({rotation:180)
dmove()
attr()パラメータの取得や変更する.attr('fill','none')//変更
.attr('fill')//取得
style()パラメータの取得や変更する.style(’fill: #f03;')//変更
.style(’fill’)//取得
hide()エレメントを非表示にする.hide()
show()エレメントを表示にする.show()
visible()エレメントの表示状態を確認する.visible()
addClass()エレメントにclass属性を付与.addClass('sample')
hasClass()classの存在チェック
引数なしならclass自体?
.hasClass('sample')
removeClass()classを削除.removeClass('sample')
toggleClass()classの差し替えtoggleClass('sample2')
data()パラメータの取得や変更する
remember()メモリの取得と設定
forget()メモリの消去.forget('oldBBox')//個別消去
.forget()//全消去
clone()複製
put()挿入
putIn()
remove()エレメントをsvgから削除
svg本体も削除可能(メモリからも?)
replace()置き換え.replace(sample.circle(100))
ungroup()エクスポート時に?.ungroup().svg()
merge()
viewbox()viewboxの設定や変更、取得
bbox()bbox()の設定や変更、取得
rbox()rbox()の設定や変更、取得
translate()行列を変換文字列に変換する.toString()
translate()行列を変換する.translate(10, 20)
add()グループへの追加などにgroup1 = group()
group1.add(sample)
clear()グループ内の削除とかに?group1.clear()
remove()グループ内の削除とかに?group1.remove(sample)

0 件のコメント :