Illustrator から svg!vol.03 【スタイルを変えてみよう!】

svgデータ をいじって遊びましょう!


前回言い忘れていました。

Illustrator から書き出すとき、
アートボードをオブジェクトより大きくしていると。

polyline・polygon の座標は大丈夫でしたけど、
path の座標は、 transform で位置を調整されていました。

なので、アートボードをオブジェクトに合わせてから書き出した方がわかりやすいです。


最初は、現実的にスタイルの変化。

こちら、厳密にはデータの変更ではありません。
スタイルを変えるだけです。


SC2018_28

このバナーを変えていきます。


Illustratorデータ はこんな感じ。

SC2018_29

ごく一般的な構造。

無意味にグループの入れ子が感心できないですねー。
生徒さんには注意するレベルです。
自分には甘いのです。


SC2018_30

スタイルは、上から、ベース・まつ毛・口。

このように、それぞれのパスに class 指定されています。


先の記事で書いたように、レイヤー分け・グループ分け。

SC2018_31

html や css と同じで、レイヤーの重なりは、下部が上です。
これで、どのパスがどの部分か理解できます。

M 〜 Z と、クローズドパスなのも確認できます。


まつ毛の部分。

SC2018_33

SC2018_32

まぶたは、オープンパス。

line が出てきました!

polyline とは違い、line はあくまで「直線」。
両端の x・y 座標を指定した一つの図形としての表現です。


最後のパスは、口ですね。


SC2018_34

新しいスタイルを追加して。


SC2018_35

指定したら。


SC2018_28

SC2018_36

変わっちゃう!


私のサイトのように、
バナーの色だけ変えたものを複数用意するときには便利です。

ファイルをコピーして増やせば、
画像ソフトを使うことなく、カラーチェンジし放題!


ここまでは、なんの問題もない。
css が書けるみなさんだったら楽勝です。


では、ちょっとだけベジェ部分をいじってみましょう。


クジラが、潮を上げている部分。

複合パスの抜きになってます。

パスは、3つのクローズドパスです。
クローズドパスは、M 〜 Z で閉じられているんでしたよね。
それを目当てに、データから該当箇所を探してみて。


SC2018_37

この部分だろうということがわかります!

でも、なんか変。

m(小文字)だし、− とか付いてるし?


データは、どんなものでもとにかくよーく見ることです!


m の場合、前の座標からの相対位置で書かれているようです。
始点が相対のままでは、オブジェクトを動かしたとき座標が変わってしまいます。

前の座標は、直前 Z の前にあります。

では、そこから計算するの?

もう少しよく見てみましょう。

Z で閉じられる直前、絶対座標になってます!

相対座標から始まって、絶対座標に帰ってきてますね。

なので、この座標をコピペすれば大丈夫。

m を M にすることも忘れずに!

ここから推測されるのは、これから出現する小文字アルファベットの後は、
相対的な数値なのだろうということです。


SC2018_38

始点をすべて絶対座標に変えたら。


SC2018_39

SC2018_40

一つだけにしてみたり!


SC2018_41

SC2018_42

二つを外に出して、色を付けてみたり!!


楽しくなってきました!!!


では、いよいよ、ベジェ本体を動かすことに挑戦です!!!




関連記事

コメント

非公開コメント

mayahuel

ブログ内検索

カレンダー

03 | 2024/04 | 05
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -

月別アーカイブ