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

執筆者:

関連記事

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

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

no image

D3.jsのBarChartをCoffeeScriptでクラス化(仮)

    グラフを描くにはデータセットの数字だけじゃなくて、描画領域の大きさとか幅マージンの値とかいろんな設定が必要なわけで、ただ、データセットの数字とマージンの数字はにんげんにとっ …

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

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

d3.jsでグラフ描画するときの枠組み作成のメモ

By: Bart Everson – CC BY 2.0 目次1 前の記事2 D3.jsとは3 グラフを書くときのHTMLの構造4 スケルトン5  jsonデータの形式6 現実的なグラフ作 …

Sparkleshareで自家製Dropboxみたいなのを試してみた

SparkleShareはDropboxのようにファイルの同期ができるフリーなサーバソフトとクライアントソフト 環境Ubuntu server 12.0.4 公式 sparkleshare.org/