javaScript SVG svg.js ライブラリ 取得

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)
line	線	２つの座標	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)