bricks/docs/ja/svg.md

Svg

コンポーネント機能：SVGアイコンの読み込みと表示をサポート。色の動的設定、点滅効果、サイズの自動調整に対応。
タイプ：通常コンポーネント
親コンポーネント：bricks.VBox

初期化パラメータ

パラメータ名	型	説明
rate	Number	拡大縮小比率。デフォルトは1で、幅（cwidth）および高さ（cheight）に影響します。
url	String	SVGファイルのURLアドレス。これによりSVGコンテンツを動的に読み込みます。
color	String	SVGの塗りつぶし色（オプション）。未指定の場合、アプリからデフォルト色を取得します。
blinktime	Number	点滅間隔（ミリ秒単位）。設定すると、定期的に表示/非表示を繰り返す点滅が有効になります。

説明：

• cwidth および cheight は自動的に rate の値に設定されます。
• dynsize は固定でtrueとなり、動的サイズ調整が有効です。
• color が指定されていない場合、bricks.app.get_color() を呼び出してデフォルト色を取得します。

主なイベント

カスタムイベントはありませんが、DOMイベントのバインディングによりインタラクションが可能です。

---

StatedSvg

コンポーネント機能：Svg を継承した、複数の状態切り替えに対応するSVGコンポーネント。各状態には対応するSVGリソースURLが割り当てられ、クリック時に状態を順番に循環して切り替え、状態変更イベントを発生させます。
タイプ：通常コンポーネント
親コンポーネント：bricks.Svg

初期化パラメータ

パラメータ名	型	説明
states	Array<{state: String, url: String}>	状態の配列。各要素は状態識別子と対応するSVG URLを含みます。
state	String	初期状態。未設定の場合は、states[0].state がデフォルトで使用されます。

例：

states: [
  { state: 'on', url: '/icons/light_on.svg' },
  { state: 'off', url: '/icons/light_off.svg' }
]

主なイベント

イベント名	発生タイミング
state_changed	状態が変更されたときに発生。新しい状態を引数として渡します。

使用例：

widget.on('state_changed', function(newState) {
  console.log('State changed to:', newState);
});

---

MultipleStateIcon

コンポーネント機能：複数の状態を持つアイコンコンポーネント。キーと値のペア形式で、複数の状態と対応するSVG URLを管理します。クリックで状態を循環し、表示内容を更新します。
タイプ：通常コンポーネント
親コンポーネント：bricks.Svg

初期化パラメータ

パラメータ名	型	説明
urls	Object<String: String>	キーは状態名、値は対応するSVGのURL。例：{ normal: '...', active: '...' }
state	String	初期状態。urls 内のいずれかのキー名である必要があります。

例：

urls: {
  play: '/icons/play.svg',
  pause: '/icons/pause.svg',
  stop: '/icons/stop.svg'
},
state: 'play'

主なイベント

イベント名	発生タイミング
state_changed	change_state メソッドが成功して状態が切り替わった後に発生。新しい状態名を引数として渡します。

.on('state_changed', ...) で状態変更を監視できます。