Mais conteúdo relacionado
Semelhante a SVG MANIAX - CSS Nite After dark7 (20)
SVG MANIAX - CSS Nite After dark7
- 23. モジュール化
defs, symbol, use 要素
defs 要素、および symbol 要素 で実体のない図形を定義し、
それを use 要素で再利用できる
要素の再利用
<defs>
<path d="..."/>
</defs>
<use xlink:href="#c" x="20"
y="10" fill="purple"/>
- 25. グラデーション
linearGradient 要素, radialGradient 要素
linearGradient 要素と radialGradient 要素で適用
SVG では 塗りにも線にも適用できる
グラデーションの変形は gradientTransform 属性で指定
<linearGradient id="grd" gradientUnits="userSpaceOnUse"
x1="0" y1="0" x2="30" y2="30">
<stop offset="0" style="stop-color:#FC6256"/>
<stop offset="1" style="stop-color:#44BFB7"/>
</linearGradient>
- 26. マスク
clip, clipPath, mask 要素
矩形・円形・パスによるマスクと、グラデーションマスク
<defs>
<clipPath id="myClip">
<circle cx="40" cy="40" r="50"/>
</clipPath>
</defs>
<rect x="0" y="0" width="100" height="100"
clip-path="url(#myClip)"/>
- 28. Illustrator における注意点
• 通常のフィルターは png 化される
• でも、SVGフィルターが使いものにならない
• メッシュグラデーションは png 化される
• ブレンドは拡張されて書き出される
• アピアランスは分割される
• ブラシもアピアランス分割状態に
• 乗算などの描画モードは無視される
- 35. インラインSVG
HTML5 内に
直接 SVG 要素を記述する
<!doctype html>
<html>
<body>
<svg viewBox="0 0 200 200">
<circle id="c" r="100" x="0" y="0"/>
</svg>
</body>
</html>
HTML
</>
2
- 39. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://
www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 200 200">
<style type="text/css">
.fillsample { fill: #44bfb7; }
@media screen and (max-width: 400px) {
.fillsample { stroke: #000; }
}
</style>
<defs>
<circle id="c" class="fillsample" r="30">
<animate attributeName="r" begin="0s" dur="7s" from="10" to="30"
repeatCount="indefinite"/>
<animate attributeName="fill" begin="0s" dur="7s" to="#FF8888"
repeatCount="indefinite"/>
</circle>
</defs>
<use xlink:href="#c" x="30" y="30"/>
...
こんなコードです
- 40. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://
www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 200 200">
<style type="text/css">
.fillsample { fill: #44bfb7; }
@media screen and (max-width: 400px) {
.fillsample { stroke: #000; }
}
</style>
<defs>
<circle id="c" class="fillsample" r="30">
<animate attributeName="r" begin="0s" dur="7s" from="10" to="30"
repeatCount="indefinite"/>
<animate attributeName="fill" begin="0s" dur="7s" to="#FF8888"
repeatCount="indefinite"/>
</circle>
</defs>
<use xlink:href="#c" x="30" y="30"/>
...
こんなコードです
width
height
指定なし
Media
Queries も
あったり
SMIL
アニメーション
させてたり
- 43. .bgsvg {
background: url(sample.svg) no-repeat 0 0;
background-size: auto;
}
CSS background
background: url('data:image/svg+xml;utf8,
<svg viewBox="0 0 10 10" width="10" height="10">
<circle fill="orange" cx="5" cy="5" r="5"/>
</svg>');
こんなふうにも書けます
- 47. img 要素
object 要素
iframe 要素 CSS background
animate要素でのアニメーションに対応していない(仕様)
svg内にimage要素で
埋め込んだ外部画像も
表示される(第2世代ま
で?)
• svg要素にwidth,heightが
指定していない場合、
background-position の
指定を無視して縦横中央に
配置される
• svg要素にwidth,heightが
指定していない場合、
repeat、background-
size が効かない
media queries の
適用が数値通りに適用
されない
正常
正常
animete要素でのアニメ
ーションがずれる
インラインSVG
正常
正常
正常
正常
正常
正常
svg に height:auto を指
定すると viewBox の高さ
がブラウザの高さになる
svg に height:auto を指
定すると viewBox の高さ
がブラウザの高さになる
正常
•svg の viewBox に指
定した値までしか拡大で
きない
•インラインSVG の要素
に transform 等が効か
ない
- 48. • SVG 文書内のスクリプトは動作しない
• SVG 文書内に埋め込んだ外部ファイルは表示されない(IEを除く)
• SVG 文書内のハイパーリンクは無視される
• SVG 文書内のスクリプトも動作する
• param 要素 や contentdocument を用いて DOM にアクセスも可能
• ただし、親である HTML 側にはイベントはバブリングされない
• SVGのすべての機能を使用できる
• 直接 SVG DOM を操作できる
• 細かい表示がまだまだブラウザ間で違う点がある
できること・できないこと
img 要素
object 要素
インライン SVG
- 55. SVG DOM アニメーション
var logo = document.getElementById("logo");
var rot = 0;
setInterval(function(){
logo.setAttribute("transform",
"rotate(" + rot + " 100 100)");
rot = rot + 1;
}, 10);
- 56. SVG DOM アニメーション
SVG は独自の名前空間を持つため、
DOM Level 1 は使えない
DOM Level 2 のメソッドを使用すること
createElement() createElementNS()
- 65. object 要素
• フォールバックも考えると、最もオススメ
• animate 要素だけでなく、SVG 内の JS や CSS も動く
• 親 HTML 側との JS 連携は面倒くさい
(param や contentdocument でアクセス可能だけど)
• SVG 内のイベントは、親 HTML 側にバブリングしない
- 66. CSS Background
• IE での表示を担保するため、
svg 要素に viewBox, width, height の指定は必須
• 幅・高さを固定した場合、CSS Sprite でも問題なく使える
- 67. インライン SVG
• SVG のすべての機能が使える
• SVG DOM を扱うことができる
• IE では、SVG 内の要素に CSS transition, animation,
transform 等は効かない
• IE では、viewBox の指定以上に大きく表示できないので、
viewBox の数値は必要な分以上に指定すること
• フォールバックが面倒くさい
- 68. アニメーション
•アニメーションをさせるなら JS 必須
• ただし、IEを除けば SMILアニメーションがお手軽
• 本格的なアニメーションは Canvas を使用する
(SVG よりもパフォーマンスがいい)
• SVG には DOM を扱える利点
• イラストの一部分だけを動かしたい、などに向いている
- 73. Quick Look コマンド
Mac の場合、以下のコマンドで
SVG を PNG に変換できる
$ qlmanage -t -s 640 -o . logo.svg
png のサイズ指定
参考)
https://developer.apple.com/library/mac/documentation/userexperience/conceptual/quicklook_programming_guide/articles/qldebugtest.html
- 80. SVG 2.0 で実現される見込みの機能
• メッシュグラデーション(meshGradient要素)
• SMILアニメーションとCSSアニメーションとの統合
• HTML的なテキストの折り返し
• フィルター機能の拡張
• OpenGL対応