dive into svg
DESCRIPTION
about SVG featuresTRANSCRIPT
![Page 1: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/1.jpg)
12011年8月21日日曜日
![Page 2: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/2.jpg)
おやまだあきひろ
小山田晃浩twitter@yomotsu株式会社ピクセルグリッドMicrosoft MVP for IE
2011年8月21日日曜日
![Page 3: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/3.jpg)
後半の流れ1. Transform2. Link3. Styling4. Filter5. Animation6. Script7. Embed8. まとめ
32011年8月21日日曜日
![Page 4: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/4.jpg)
transform移動、拡大/縮小、回転、スキュー
42011年8月21日日曜日
![Page 5: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/5.jpg)
2011年8月21日日曜日
![Page 6: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/6.jpg)
2011年8月21日日曜日
![Page 7: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/7.jpg)
<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日日曜日
![Page 8: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/8.jpg)
<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日日曜日
![Page 9: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/9.jpg)
<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日日曜日
![Page 10: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/10.jpg)
transform="scale(1.5) rotate(45)"
102011年8月21日日曜日
![Page 11: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/11.jpg)
scale(1.5)
translate(200,300)
rotate(45,200,300)
skewX(45)
skewY(45)
matrix(0,0,0,0,0,0)
拡大/縮小
移動
回転とその中心
スキュー(斜傾変換 横)
スキュー(斜傾変換 縦)
行列変換
2011年8月21日日曜日
![Page 12: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/12.jpg)
2011年8月21日日曜日
![Page 13: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/13.jpg)
13
selector { -webkit-transform : rotate(45deg); -moz-transform : rotate(45deg); -ms-transform : rotate(45deg); -o-transform : rotate(45deg); transform : rotate(45deg);}
2011年8月21日日曜日
![Page 14: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/14.jpg)
移動、拡大/縮小、回転、スキュー属性で指定する
142011年8月21日日曜日
![Page 15: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/15.jpg)
link
152011年8月21日日曜日
![Page 16: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/16.jpg)
2011年8月21日日曜日
![Page 17: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/17.jpg)
2011年8月21日日曜日
![Page 18: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/18.jpg)
2011年8月21日日曜日
![Page 19: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/19.jpg)
<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日日曜日
![Page 20: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/20.jpg)
<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日日曜日
![Page 21: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/21.jpg)
<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日日曜日
![Page 22: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/22.jpg)
<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日日曜日
![Page 23: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/23.jpg)
<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日日曜日
![Page 24: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/24.jpg)
<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日日曜日
![Page 25: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/25.jpg)
HTMLのa要素に似ている形状に合わせたリンク判定XLinkの仕組みを使うため名前空間を宣言する
252011年8月21日日曜日
![Page 26: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/26.jpg)
Styling
262011年8月21日日曜日
![Page 27: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/27.jpg)
2011年8月21日日曜日
![Page 28: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/28.jpg)
<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日日曜日
![Page 29: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/29.jpg)
<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日日曜日
![Page 30: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/30.jpg)
<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日日曜日
![Page 31: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/31.jpg)
<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日日曜日
![Page 32: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/32.jpg)
<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日日曜日
![Page 33: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/33.jpg)
<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日日曜日
![Page 34: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/34.jpg)
<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日日曜日
![Page 35: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/35.jpg)
display
fill
fill-rule
fill-opacity
stroke
stroke-width
表示
塗り色
内側、外側、重なりの塗り方
塗り色の不透明度
枠線の色
枠線の幅
2011年8月21日日曜日
![Page 36: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/36.jpg)
書き方は一般のCSSと同じプロパティーはSVG独自
362011年8月21日日曜日
![Page 37: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/37.jpg)
path:hover{ fill-opacity:0.5;}@media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; }}
372011年8月21日日曜日
![Page 38: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/38.jpg)
path:hover{ fill-opacity:0.5;}@media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; }}
382011年8月21日日曜日
![Page 39: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/39.jpg)
path:hover{ fill-opacity:0.5;}@media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; }}
392011年8月21日日曜日
![Page 40: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/40.jpg)
2011年8月21日日曜日
![Page 41: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/41.jpg)
擬似クラスが有効メディアクエリーが有効
412011年8月21日日曜日
![Page 42: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/42.jpg)
filter effects
422011年8月21日日曜日
![Page 43: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/43.jpg)
2011年8月21日日曜日
![Page 44: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/44.jpg)
2011年8月21日日曜日
![Page 45: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/45.jpg)
2011年8月21日日曜日
![Page 46: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/46.jpg)
<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日日曜日
![Page 47: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/47.jpg)
<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日日曜日
![Page 48: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/48.jpg)
<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日日曜日
![Page 49: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/49.jpg)
<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日日曜日
![Page 50: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/50.jpg)
<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日日曜日
![Page 51: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/51.jpg)
<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日日曜日
![Page 52: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/52.jpg)
<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日日曜日
![Page 53: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/53.jpg)
<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日日曜日
![Page 54: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/54.jpg)
<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日日曜日
![Page 55: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/55.jpg)
2011年8月21日日曜日
![Page 56: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/56.jpg)
原始フィルター
2011年8月21日日曜日
![Page 57: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/57.jpg)
<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日日曜日
![Page 58: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/58.jpg)
feBlend
feColorMatrix
feFlood
feGaussianBlur
feMerge
feOffset
混合
色の行列変換
塗りつぶし
ぼかし
合成
位置ずらし
2011年8月21日日曜日
![Page 59: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/59.jpg)
原始フィルター組み合わせ例
2011年8月21日日曜日
![Page 60: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/60.jpg)
2011年8月21日日曜日
![Page 61: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/61.jpg)
2011年8月21日日曜日
![Page 62: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/62.jpg)
2011年8月21日日曜日
![Page 63: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/63.jpg)
in="sourceAplha"
2011年8月21日日曜日
![Page 64: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/64.jpg)
<feGaussianBlur/>
2011年8月21日日曜日
![Page 65: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/65.jpg)
<feOffet/>
2011年8月21日日曜日
![Page 66: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/66.jpg)
in="sourceGraphic"
2011年8月21日日曜日
![Page 67: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/67.jpg)
<feMerge/>
2011年8月21日日曜日
![Page 68: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/68.jpg)
2011年8月21日日曜日
![Page 69: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/69.jpg)
<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日日曜日
![Page 70: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/70.jpg)
<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日日曜日
![Page 71: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/71.jpg)
<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日日曜日
![Page 72: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/72.jpg)
<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日日曜日
![Page 73: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/73.jpg)
<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日日曜日
![Page 74: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/74.jpg)
<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日日曜日
![Page 75: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/75.jpg)
<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日日曜日
![Page 76: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/76.jpg)
2011年8月21日日曜日
![Page 77: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/77.jpg)
様々な視覚効果原始フィルターを組み合わせるCSSでも利用可能
772011年8月21日日曜日
![Page 78: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/78.jpg)
Animation (SMIL)
782011年8月21日日曜日
![Page 79: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/79.jpg)
2011年8月21日日曜日
![Page 80: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/80.jpg)
2011年8月21日日曜日
![Page 81: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/81.jpg)
<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日日曜日
![Page 82: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/82.jpg)
<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日日曜日
![Page 83: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/83.jpg)
<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日日曜日
![Page 84: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/84.jpg)
<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日日曜日
![Page 85: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/85.jpg)
<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日日曜日
![Page 86: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/86.jpg)
<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日日曜日
![Page 87: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/87.jpg)
色や位置をアニメーション変形用アニメーションパスに沿った移動のアニメーション
872011年8月21日日曜日
![Page 88: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/88.jpg)
Script
882011年8月21日日曜日
![Page 89: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/89.jpg)
2011年8月21日日曜日
![Page 90: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/90.jpg)
<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日日曜日
![Page 91: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/91.jpg)
スクリプトも動くマウスの位置を取得するなども可能jQueryは動かない
912011年8月21日日曜日
![Page 92: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/92.jpg)
Embed
922011年8月21日日曜日
![Page 93: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/93.jpg)
2011年8月21日日曜日
![Page 94: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/94.jpg)
画像として読み込む
2011年8月21日日曜日
![Page 95: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/95.jpg)
<body> <h1>img 要素で埋め込む</h1>
<img src="image.svg" alt=""></body>
952011年8月21日日曜日
![Page 96: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/96.jpg)
<body> <h1>img 要素で埋め込む</h1>
<img src="image.svg" alt=""></body>
962011年8月21日日曜日
![Page 97: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/97.jpg)
ドキュメントとして混在
2011年8月21日日曜日
![Page 98: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/98.jpg)
<body> <h1>img 要素で埋め込む</h1>
<svg width="300" height="300"> <path d="..." /> <path d="..." /> <path d="..." /> </svg></body>
982011年8月21日日曜日
![Page 99: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/99.jpg)
<body> <h1>img 要素で埋め込む</h1>
<svg width="300" height="300"> <path d="..." /> <path d="..." /> <path d="..." /> </svg></body>
992011年8月21日日曜日
![Page 100: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/100.jpg)
書いた/描いたSVGはHTMLで使える画像として
ドキュメントとして
1002011年8月21日日曜日
![Page 101: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/101.jpg)
101
補足
2011年8月21日日曜日
![Page 102: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/102.jpg)
2011年8月21日日曜日
![Page 103: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/103.jpg)
Raphaël̶JavaScript Libraryhttp://raphaeljs.com/
2011年8月21日日曜日
![Page 104: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/104.jpg)
まとめ
1042011年8月21日日曜日
![Page 105: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/105.jpg)
HTMLとSVGは似ている
2011年8月21日日曜日
![Page 106: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/106.jpg)
あたらしいUIができる!
2011年8月21日日曜日
![Page 108: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/108.jpg)
ピクセルグリッド小山田 晃浩 / 外村 和仁
2011年8月21日日曜日
![Page 109: Dive Into SVG](https://reader038.vdocuments.mx/reader038/viewer/2022102804/54b79f924a795993718b467e/html5/thumbnails/109.jpg)
109
アンケートや情報共有にご協力ください!
カンファレンス全体についてのアンケートhttp://bit.ly/toka20Dive into SVG についてのアンケートhttp://bit.ly/toka20-A5Twitter(実況中継用にお使いください)#html5jFacebookページ(質問用にお使いください)http://www.facebook.com/html5j
2011年8月21日日曜日