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, ミドルウェア
-

執筆者:

関連記事

d3.jsで力指向グラフを使って遊ぶ~force layout & zoom & pan

参考 D3をはじめよう 参考 Force Layout 目次1 forceレイアウトのスケルトン2 zoom&pan forceレイアウトのスケルトン forceレイアウトではオブジェクトに力が作用し …

D3.jsでマウスオーバーでオブジェクトをちょっと明るくする

D3にはd3.select(this)という便利なイディオムがあるのです 色はd3.rgbというオブジェクトにすると、brighter …

開発者向けリアルタイムチャットアプリケーション「AsakusaSatellite」を試してみた

By: NASA Goddard Space Flight Center – CC BY 2.0 目次1 公式2 前提3 git clone4 bundle5 sockyサーバー6 rai …

Rails4とD3.jsでローソク足グラフを描く〜Rails準備編

By: Manuel Calavera – CC BY 2.0 前回 Rails4で複雑な検索〜Ransack こちらのサンプルを使用させてもらいました。 datawarehouse.we …

d3.jsで棒グラフを作成する

  前提 SVGでビジュアライゼーションことはじめ~d3.js   目次1 データの数だけ棒を表示する2 scale3 テキストラベルをつける4 JSONで読む データの数だけ棒を …