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

執筆者:

関連記事

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …

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

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

 

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

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

Apache OpenMeetingsでオンラインビデオ会議してみた

目次1 Apache OpenMeetingsとは2 ダウンロードとインストール3 ウェブインストール4 できた Apache OpenMeetingsとは Openmeetingsは、Red5サーバ …

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

前回 Rails4とD3.jsでローソク足グラフを描く〜Rails準備編 目次1 jsonデータ2 y_scaleを考える3 始値と終値から箱をつくる4 高値と安値でひげをつくる5 y_axisをつけ …