上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 SVGの塗り系の効果を一覧にしたノートです。
 SVG講座をやるようなことがあれば、また改めてきちんと書き直すことにします。




Painting: Filling, Stroking and Marker Symbols – SVG 1.1 (Second Edition)


fill

※べた塗り



<svg style="height:100px;">
<rect x="10" y="10" width="200" height="50" fill="#f00" />
</svg>



fill-rule

※自分自身が重なるときの塗り



<svg style="height:100px;">
<g fill-rule="nonzero">
<polygon fill="#09f" stroke="#009" stroke-width="5px" points="50,10 30,70 80,30 20,30 70,70" />
</g>
</svg>



<svg style="height:100px;">
<g fill-rule="evenodd">
<polygon fill="#09f" stroke="#009" stroke-width="5px" points="50,10 30,70 80,30 20,30 70,70" />
</g>
</svg>



fill-opacity

※塗りの透明度



<svg style="height:100px;">
<rect x="10" y="10" width="200" height="50" fill="#09f" />
<rect x="30" y="30" width="200" height="50" fill="#0f9" fill-opacity=".5" />
</svg>



stroke-linecup

※ラインの端の形



<svg style="height:70px;">
<polyline fill="none" stroke="#09f" stroke-width="20" stroke-linecap="butt" points="20,50 120,20" />
</svg>




<svg style="height:70px;">
<polyline fill="none" stroke="#09f" stroke-width="20" stroke-linecap="round" points="20,50 120,20" />
</svg>


<svg style="height:70px;">
<polyline fill="none" stroke="#09f" stroke-width="20" stroke-linecap="square" points="20,50 120,20" />
</svg>



stroke-linejoin

※角結合



<svg style="height:70px;">
<polyline fill="none" stroke="#09f" stroke-width="20" stroke-linejoin="miter" points="20,50 130,20 130,50" />
</svg>
stroke-miterlimit




<svg style="height:70px;">
<polyline fill="none" stroke="#09f" stroke-width="20" stroke-linejoin="round" points="20,50 130,20 130,50" />
</svg>




<svg style="height:70px;">
<polyline fill="none" stroke="#09f" stroke-width="20" stroke-linejoin="bevel" points="20,50 130,20 130,50" />
</svg>



stroke-dasharray

※破線・塗りと間隔の2つの値を入れられる。



<svg style="height:70px;">
<polyline fill="none" stroke="#09f" stroke-width="5" stroke-dasharray="5 10" points="20,50 180,20 130,50" />
</svg>



stroke-dashoffset

※破線の開始位置。



<svg style="height:70px;">
<polyline fill="none" stroke="#09f" stroke-width="5" stroke-dasharray="5 10" stroke-dashoffset="20" points="20,50 180,20 130,50" />
</svg>



stroke-opacity

※ラインの透明度



<svg style="height:70px;">
<polygon fill="none" stroke="#09f" stroke-width="5" points="20,50 180,20 130,50 20,20" />
<polygon fill="none" stroke="#0f9" stroke-width="5" stroke-opacity=".6" points="30,60 190,30 140,40 30,30" />
</svg>

このエントリーをはてなブックマークに追加
Wed.02.09.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。