12011年8月21日日曜日

おやまだあきひろ

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

2011年8月21日日曜日

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

32011年8月21日日曜日

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

42011年8月21日日曜日

2011年8月21日日曜日

2011年8月21日日曜日

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

72011年8月21日日曜日

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

82011年8月21日日曜日

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

92011年8月21日日曜日

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

102011年8月21日日曜日

scale(1.5)

translate(200,300)

rotate(45,200,300)

skewX(45)

skewY(45)

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

拡大/縮小

移動

回転とその中心

スキュー(斜傾変換 横)

スキュー(斜傾変換 縦)

行列変換

2011年8月21日日曜日

2011年8月21日日曜日

13

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

2011年8月21日日曜日

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

142011年8月21日日曜日

link

152011年8月21日日曜日

2011年8月21日日曜日

2011年8月21日日曜日

2011年8月21日日曜日

<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>

192011年8月21日日曜日

<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>

202011年8月21日日曜日

<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>

212011年8月21日日曜日

<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>

222011年8月21日日曜日

<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>

232011年8月21日日曜日

<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>

242011年8月21日日曜日

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

252011年8月21日日曜日

Styling

262011年8月21日日曜日

2011年8月21日日曜日

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

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

282011年8月21日日曜日

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

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

292011年8月21日日曜日

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

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

302011年8月21日日曜日

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

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

312011年8月21日日曜日

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

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

322011年8月21日日曜日

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

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

332011年8月21日日曜日

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

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

342011年8月21日日曜日

display

fill

fill-rule

fill-opacity

stroke

stroke-width

表示

塗り色

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

塗り色の不透明度

枠線の色

枠線の幅

2011年8月21日日曜日

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

362011年8月21日日曜日

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

372011年8月21日日曜日

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

382011年8月21日日曜日

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

392011年8月21日日曜日

2011年8月21日日曜日

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

412011年8月21日日曜日

filter effects

422011年8月21日日曜日

2011年8月21日日曜日

2011年8月21日日曜日

2011年8月21日日曜日

<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>

462011年8月21日日曜日

<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>

472011年8月21日日曜日

<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>

482011年8月21日日曜日

<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>

492011年8月21日日曜日

<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>

502011年8月21日日曜日

<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>

512011年8月21日日曜日

<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>

522011年8月21日日曜日

<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>

532011年8月21日日曜日

<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>

542011年8月21日日曜日

2011年8月21日日曜日

原始フィルター

2011年8月21日日曜日

<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>

572011年8月21日日曜日

feBlend

feColorMatrix

feFlood

feGaussianBlur

feMerge

feOffset

混合

色の行列変換

塗りつぶし

ぼかし

合成

位置ずらし

2011年8月21日日曜日

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

2011年8月21日日曜日

2011年8月21日日曜日

2011年8月21日日曜日

2011年8月21日日曜日

in="sourceAplha"

2011年8月21日日曜日

<feGaussianBlur/>

2011年8月21日日曜日

<feOffet/>

2011年8月21日日曜日

in="sourceGraphic"

2011年8月21日日曜日

<feMerge/>

2011年8月21日日曜日

2011年8月21日日曜日

<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>

692011年8月21日日曜日

<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>

702011年8月21日日曜日

<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>

712011年8月21日日曜日

<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>

722011年8月21日日曜日

<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>

732011年8月21日日曜日

<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>

742011年8月21日日曜日

<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>

752011年8月21日日曜日

2011年8月21日日曜日

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

772011年8月21日日曜日

Animation (SMIL)

782011年8月21日日曜日

2011年8月21日日曜日

2011年8月21日日曜日

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

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

812011年8月21日日曜日

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

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

822011年8月21日日曜日

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

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

832011年8月21日日曜日

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

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

842011年8月21日日曜日

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

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

852011年8月21日日曜日

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

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

862011年8月21日日曜日

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

872011年8月21日日曜日

Script

882011年8月21日日曜日

2011年8月21日日曜日

<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>

902011年8月21日日曜日

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

912011年8月21日日曜日

Embed

922011年8月21日日曜日

2011年8月21日日曜日

画像として読み込む

2011年8月21日日曜日

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

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

952011年8月21日日曜日

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

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

962011年8月21日日曜日

ドキュメントとして混在

2011年8月21日日曜日

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

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

982011年8月21日日曜日

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

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

992011年8月21日日曜日

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

ドキュメントとして

1002011年8月21日日曜日

101

補足

2011年8月21日日曜日

2011年8月21日日曜日

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

2011年8月21日日曜日

まとめ

1042011年8月21日日曜日

HTMLとSVGは似ている

2011年8月21日日曜日

あたらしいUIができる！

2011年8月21日日曜日

http://goo.gl/VjyXi

2011年8月21日日曜日

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

2011年8月21日日曜日

109

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

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

2011年8月21日日曜日