D3.js ミドルウェア

Inkscapeでsvgのグラデーションとフィルターを作成してみた

投稿日:

 

 

Inkscapeといえば無料で使えるきれいな線がかけるソフトという認識

SVGを勉強しているとそのフィルタエディタがとても便利だった

参考にしたページ www.atmarkit.co.jp/fwcr/design/benkyo/webgraphics03/04.html

グラデーションのつくり方

英語だけど何言っているかわからなくても見てればだいたいわかる

2013-01-11_17h16_16

まず短形ツールをつかって適当に四角形をつくる

2013-01-11_17h16_31

つくったら選択ツールを選べば確定

2013-01-11_17h16_51

つぎにグラデーションツールを選んで

2013-01-11_17h17_09

動画を参考にグラデーション作成

2013-01-11_17h17_57

うえのように補助線を水平・垂直にするにはctrlを押しながらドラッグすればOK

 

フィルターのつくり方

以前につくったフィルタをInkscapeでつくってみる

d3.jsでrectに角丸・半透明・グラデーション・ドロップシャドウ・ライティング効果を追加~主にsvgのこと

もとのチュートリアル www.w3schools.com/svg/svg_feoffset.asp

「フィルタ」から「フィルタエディタ」を選ぶ

2013-01-11_17h19_57

フィルタエディタはこんな感じ 最初に開いた状態だと狭すぎるので境界線を縦にドラッグして広げておいた方がよい

2013-01-11_17h20_22

エフェクトは

www.hcn.zaq.ne.jp/___/SVG11-2nd/filters.html

 

2013-01-11_17h20_56

フィルタの新規作成からエフェクトを追加

2013-01-11_17h22_01

チュートリアルのとおりにフィルタを作成

とても簡単

ソースの選び方は左の三角を右の縦書のところにドラッグすればOK

2013-01-11_17h25_26

第1ステップができた

2013-01-11_17h25_16

 

ガウスぼかしBlurを追加 ブレンドのソースを変更して、オフセットのソースもアルファに変更

2013-01-11_17h28_43

ドロップシャドウできた

2013-01-11_17h28_56

実はInkscapeのフィルターもフィルタエディタでできたフィルタの組合せでできてる

2013-01-11_17h31_18

 

 

2013-01-11_17h31_11

 

できたsvgのdefsはこんな感じ

 

Inkscapeのフィルター一覧 d.hatena.ne.jp/feb-hare/20101110/1289353207

 

htmlにおいてD3.jsから使ってみようと思ったけど、そのままコピペでは使えなかった

それでも実際に効果を見ながらフィルタを作成できるのでやっぱり便利

d3.jsで使うにはコード上でパラメータを使うとか

 

*そのうち読む

Scripting Inkscape with d3.js

 

-D3.js, ミドルウェア
-

執筆者:

関連記事

Tree図をいろいろ試してみる~d3.js

  前提 Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize これで取得してきたJSONを使っていろいろ試してみた と言っても、まだ指定のJSONを置き換えただ …

d3.jsで選択されたデータ範囲のグラフを表示する〜d3.brush

参考(というかほぼそのまま) 【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush) 目次1 コントロール用のグラフ領域を作成する2 brushを宣言する3 選択領域用のre …

d3.jsのグラフにマウスオーバーでツールチップをつける

決め打ちで スタイルでフォントサイズを指定した ツールチップがはみ出す場合の条件と処理を追加

 

Ruby製Reactive Web Frameworkを試してみた〜Volt

目次1 Voltとは2 環境3 インストール4 サンプルプロジェクトの作成5 サンプルTodoでチュートリアルを試す Voltとは Voltはサーバーサイド・クライアントサイドの両方をRubyで記述で …

簡単にグラフが作成できるC3.jsをRailsでつかってみた

By: Nguyen Hung Vu – CC BY 2.0 目次1 C3.js2 gon3 複数の時系列データで一方にはある時点のデータがあるけど他方にはある時点のデータがないみたいな場 …