Dive Into SVG

12011年8月21日日曜日

おやまだあきひろ

小山田晃浩twitter@yomotsu株式会社ピクセルグリッドMicrosoft MVP for IE


後半の流れ1. Transform2. Link3. Styling4. Filter5. Animation6. Script7. Embed8. まとめ


transform移動、拡大/縮小、回転、スキュー




<path d="..." transform="translate(30,30)"/><path d="..." transform="scale(1.5)"/><path d="..." transform="rotate(30,0,0)"/><path d="..." transform="skewX(45)"/>






transform="scale(1.5) rotate(45)"


scale(1.5)

translate(200,300)

rotate(45,200,300)

skewX(45)

skewY(45)

matrix(0,0,0,0,0,0)

拡大/縮小

移動

回転とその中心

スキュー(斜傾変換横)

スキュー(斜傾変換縦)

行列変換



13

selector { -webkit-transform : rotate(45deg); -moz-transform : rotate(45deg); -ms-transform : rotate(45deg); -o-transform : rotate(45deg); transform : rotate(45deg);}


移動、拡大/縮小、回転、スキュー属性で指定する


link





<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<a xlink:href="http://google.com"> <path d="..." /> </a>

</svg>




</svg>




</svg>


http://google.com

http://google.com



</svg>




</svg>


http://www.w3.org/1999/xlink


http://google.com

http://google.com



</svg>




http://google.com

http://google.com

HTMLのa要素に似ている形状に合わせたリンク判定XLinkの仕組みを使うため名前空間を宣言する


Styling



<svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs>

<path id="sample" d="..." /></svg>




















display

fill

fill-rule

fill-opacity

stroke

stroke-width

表示

塗り色

内側、外側、重なりの塗り方

塗り色の不透明度

枠線の色

枠線の幅


書き方は一般のCSSと同じプロパティーはSVG独自


path:hover{ fill-opacity:0.5;}@media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; }}







擬似クラスが有効メディアクエリーが有効


filter effects





<svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs>

<g filter="url(#MyFilter)"> <path d="..." /> </g></svg>


http://www.w3.org/2000/svg











































原始フィルター







feBlend

feColorMatrix

feFlood

feGaussianBlur

feMerge

feOffset

混合

色の行列変換

塗りつぶし

ぼかし

合成

位置ずらし


原始フィルター組み合わせ例





in="sourceAplha"


<feGaussianBlur/>


<feOffet/>


in="sourceGraphic"


<feMerge/>



<filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5" result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge></filter>















様々な視覚効果原始フィルターを組み合わせるCSSでも利用可能


Animation (SMIL)




<rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion></rect>

<path id="guide" d="..."/>

















色や位置をアニメーション変形用アニメーションパスに沿った移動のアニメーション


Script



<svg xmlns="http://www.w3.org/2000/svg"> <g id="sample" ...> <path d="..."/> </g> <script type="application/ecmascript">document.querySelector("#sample").addEventListener("click", function(){ this.setAttribute("fill","red"); alert("Clicked !!");}, false); </script></svg>




スクリプトも動くマウスの位置を取得するなども可能jQueryは動かない


Embed



画像として読み込む


<body> <h1>img 要素で埋め込む</h1>

<img src="image.svg" alt=""></body>



<img src="image.svg" alt=""></body>


ドキュメントとして混在



<svg width="300" height="300"> <path d="..." /> <path d="..." /> <path d="..." /> </svg></body>



<svg width="300" height="300"> <path d="..." /> <path d="..." /> <path d="..." /> </svg></body>


書いた/描いたSVGはHTMLで使える画像として

ドキュメントとして

1002011年8月21日日曜日

101

補足



Raphaël̶JavaScript Libraryhttp://raphaeljs.com/


http://raphaeljs.com/

http://raphaeljs.com/

まとめ

1042011年8月21日日曜日

HTMLとSVGは似ている


あたらしいUIができる！


http://goo.gl/VjyXi


http://goo.gl/VjyXi

http://goo.gl/VjyXi

ピクセルグリッド小山田晃浩 / 外村和仁


109

アンケートや情報共有にご協力ください！

カンファレンス全体についてのアンケートhttp://bit.ly/toka20Dive into SVG についてのアンケートhttp://bit.ly/toka20-A5Twitter（実況中継用にお使いください）#html5jFacebookページ（質問用にお使いください）http://www.facebook.com/html5j


http://bit.ly/toka20

http://bit.ly/toka20

http://bit.ly/toka20-A5

http://bit.ly/toka20-A5

http://www.facebook.com/html5j

http://www.facebook.com/html5j

Technology

Dive Into SVG