上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 このページは、最新ブラウザ、「chrome7」「IE9 Beta」「Firefox4 Beta」でしが描画されません
 SVGのグラデーションのメモです。





Linear gradients



基本サンプル



<svg style="height:150px;">
<g>
<defs>
<linearGradient id="gra1">
<stop offset="0%" stop-color="#00f" />
<stop offset="33%" stop-color="#FF6" />
<stop offset="66%" stop-color="#f03" />
<stop offset="100%" stop-color="#000" />
</linearGradient>
</defs>
<rect x="20" y="20" width="400" height="120" fill="url(#gra1)">
</g>
</svg>




gradientUnits(角度その他)



<svg style="height:150px;">
<g>
<defs>
<linearGradient id="gra1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="100" y2="100">
<stop offset="0%" stop-color="#00f" />
<stop offset="33%" stop-color="#FF6" />
<stop offset="66%" stop-color="#f03" />
<stop offset="100%" stop-color="#000" />
</linearGradient>
</defs>
<rect x="20" y="20" width="400" height="120" fill="url(#gra1)">
</g>
</svg>
userSpaceOnUse…絶対指定(px)
objectBoundingBox…相対指定(%)



spreadMethod

<svg style="height:150px;">
<g>
<defs>
<linearGradient id="gra1" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="50%" y2="50%" spreadMethod="reflect">
<stop offset="0%" stop-color="#00f" />
<stop offset="33%" stop-color="#FF6" />
<stop offset="66%" stop-color="#f03" />
<stop offset="100%" stop-color="#000" />
</linearGradient>
</defs>
<rect x="20" y="20" width="400" height="120" fill="url(#gra1)">
</g>
</svg>
pad…最後の色で塗りつぶし
reflect …反射(反転して繰り返し)
repeat…繰り返し





radialGradient





<svg style="height:150px;">
<g>
<defs>
<radialGradient id="gra1" gradientUnits="objectBoundingBox" cx="70%" cy="50%" r="70%" fx="20%" fy="20%">
<stop offset="0%" stop-color="#00f" />
<stop offset="33%" stop-color="#FF6" />
<stop offset="66%" stop-color="#f03" />
<stop offset="100%" stop-color="#000" />
</radialGradient>
</defs>
<rect x="20" y="20" width="400" height="120" fill="url(#gra1)">
</g>
</svg>
fx,fy…基点
cx,cy…起点から終点への最大幅の指定(50%がデフォルト)
r…半径




実際に表示確認してみる(編集可)
【HTML】

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