昔、娘の通っていた小学校のイベント用に描いた魚の絵の中から、ひとつを選んでSVGにしました。Adobe Illustrator で絵を取り込んで向きを変え、レイヤーを追加して曲線でなぞりました。結果をSVGで出力したものを使って前回のプログラムに組み込みました。
polygon や path の線が交差するなどして、図の中に地の色を塗りたい場合があります。今回は魚の目の部分を塗らないようにしたかったのですが、こういう場合は CSS の fill-rule を変更するとうまくいきます。fill-rule が既定では nonzero で、常に塗りつぶされてしまいますが、evenodd を指定することで、塗りつぶさないよう指定することができます。
作成したプログラムはこちらになります。
のんきさんの年月記 
“” への1件の返信