ハマるSVG＠CSS nite LP47

Transcript

1. 吳䒭⠓爡תר׹׃
   匟歊湫埠
2. Sublime Text 3 User 吳䒭⠓爡תר׹׃
   匟歊湫埠
3. 8FCⵖ⡲罏ך׋׭ך
 *MMVTUSBUPSكؙة٦ر٦ةך侄猰剅 ֮׻ײֹ
   
   瓐加
   ⽆㡦
   
   ♲ꥡٓنꞿ谏㻂ㄤծ㹧愮翯✳
   
   匟歊
   湫埠
4. ͸·Δʲቕ·Δɾర·Δɾṇ·Δʳ ᶃ ͽͬͨΓ߹ͬͯ͸͍Δɻ
   ᶄ ઒ɾ஑ͳͲʹམͪࠐΉɻ
   ʮਂΈʹʵɾΔʯ
   ʮߔʹʵɾΔʯ
   ʮՌ͸आۚͷ෵;ͪ ʹʵɾΓʗුӢ
   ࢛໎ʯ
   ᶅ ܭུʹ͔͚ΒΕΔɻ
   ʮΘͳʹʵɾΔʯ
   ʮࢥ͏ͭ΅ʹʵɾΔʯ
   ᶆ ৚݅ʹͽͬͨΓ߹͏ɻద߹͢Δɻ͋ͯ͸·Δɻ
   ʮ໾ʹʵɾ͍ͬͯΔʯ
   ᶇ ʢʮܕʹ͸·ΔʯͷܗͰʣߦಈɾදݱͳͲ͕ྨܕతͰ͋Δɻ
   ʮܕʹʵɾͬͨจষʯ
   ʮܕʹʵɾͬͨڭҭʯ
   ᶈ ઐ೦͢Δɻ·ͨɼເதʹͳͬͯ਎ಈ͖͕ͱΕͳ͘ͳΔɻݱ୅Ͱ΋ଏޠతʹ༻͍Δɻ
   ʮࠓύιίϯʹʵɾ͍ͬͯΔʯ
   ʮੈؒϊࣄχʵɾϧʗ೔෤ʯ
   ʮਮΒ͖͠உ͸ʵɾ Βͤʗුੈ૲ࢠɾҰ୅உ
   ʯ
   ʤʮ͸ΊΔʯʹର͢Δࣗಈࢺʥ େࣙྛ
   ୈࡾ൛ΑΓ
5. 47(ח 㣄⚥ח׮ז׸לծ 縐ח׮כת׷
6. 47(ח 㣄⚥ח׮ז׸לծ 縐ח׮ַַ׷
7. 47(ךⵃ欽朐屣
8. ،صً٦ءّٝ
   
   ؎ٝةؙٓءّٝ Animation & Interaction
9. https://arrivabusandcoach.co.uk/buses-the-weird-and-wonderful
10. https://fleximize.com/mission/
11. ؽآُ،ٓ؎ئ٦ءّٝ Visualization
12. http://www.bbc.com/news/politics/eu_referendum/results https://nbremer.github.io/olympicfeathers/
13. http://flowingdata.com/2015/12/15/a-day-in-the-life-of-americans/
14. ٗ؞ Logos
16. ،؎؝ٝ Icons
17. https://github.com/blog/2112-delivering-octicons-with-svg
18. https://sarasoueidan.com/blog/icon-fonts-to-svg/
19. ➙㔐כծ崢䩛ז⢪׻׸倯״׶׮
 㖑㄂ז⢪׻׸倯
    דך縐ח岣湡׃ג׫ת׃׳ֲ
20. ׉ך⵸חծ47(ך暴䗙
21. Standalone SVG )5.- $44 47( )5.- TWH TWH inline SVG 兛鸐ך歗⫷ؿ؋؎ٕה׃ג邌爙ׇׁ׷ )5.-ך⚥חծ47(؝٦س׾湫䱸剅ֻ 兛鸐ך歗⫷ה殯ז׷暴䗙
22. 兛鸐ך歗⫷ה殯ז׷暴䗙 WJFX#PY XJEUI
    IFJHIU QSFTFSWF"TQFDU3BUJP 䲽歗걄㚖ך䏟垥禸׾㹀纏 㹋㼄ך؟؎ؤ䭷㹀 䭁簭儗ך،ألؙز嫰⥂䭯倯岀ך䭷㹀
23. 47(ךعو׷ه؎ٝز 1 鼅 0
24. *&ה"OESPJE
    ⟃♴ד عو׷ 01
25. JOMJOF
    47(
    ך㜥さ 
    
    JNH銲稆ך㜥さ *&
    "OESPJEד47(ך嫰桦ֶַָ׃ְ  J04
26. ז׈ 47(ך넝ׁ٥䌴ָ䭷㹀ׁ׸גְזְ <svg viewBox="0 0 200 200"> … </svg>
27. ז׈ 47(ך넝ׁ٥䌴ָ䭷㹀ׁ׸גְזְ JOMJOF
    47(
    חכ
    IFJHIU
    BVUP
    ָ⸬ַזְ QSFTFSWF"TQFDU3BUJPך
    䮙⹛חغָؚ֮׷
28. 鍑寸 TWH銲稆חծXJEUI
    IFJHIU
    ׾QYד䭷㹀 <svg viewBox="0 0 200 200" ɹɹɹwidth="200px" height="200px"> … </svg> * CSSͰͷɺwidth,heightࢦఆͰ΋Մ
29. 鍑寸 "Jךչٖأهٝءـպחثؑحؙ׃זְ
30. JOMJOF
    47(
    ך
    'MVJE
    ⻉ד
 عو׷ 02
31. *&
    4BGBSJד
    JOMJOF
    47(
    ָ'MVJEחז׵זְ TDSFFO
    XJEUI
32. ז׈ *&דכծIFJHIU
    BVUP
    ָ⸬ַזְ svg { height: auto; } QYח
 㔿㹀ׁ׸׷
    )5.-
    $BOWBT
    ך➬圫הずׄ
33. ז׈ 4BGBSJծ$44ָIFJHIU㾩䚍׾馄ִ׵׸זְ svg { height: auto; } QYח
 㔿㹀ׁ׸׷
    )5.-
    $BOWBT
    ך➬圫הずׄ <svg width="200px" height="200px" viewBox="0 0 200 200" style="width: 300px; height: auto"> IFJHIU㾩䚍ָ ⮚⯓ׁ׸׷
34. 鍑寸 QBEEJOH
    IBDL
    ׃׋EJW銲稆ד㔲ֲ div.svg-container .svg-wrap > svg { display: block; position: absolute; width: 100%; height: 100%; } .svg-container { position: relative; height:0; padding-top: calc(100%/200*200); } TWH
35. 47(
    4QSJUFT
    47(
    4UPSF דعو׷ 03
36. icons.svg index.html Send Mail 47(
    4QSJUFT
    ָծ邌爙ׁ׸זְ
    
    װ׋׵ꅾֻז׷ <svg> <use xlink:href="icon.svg#train"/> </svg>
37. *&
    &EHFծ㢩鿇47(ַ׵*%⿫撑דֹזְ icons.svg index.html Send Mail ז׈
38. J04
    ⟃⵸ծ⿫撑׀החؙٔؒأز icons.svg index.html Send Mail ז׈
39. 鍑寸 ،؎؝ٝ欽47(׾ծ)5.-חJOMJOFד㙵׭׷ index.html Send Mail <html> <body> <svg> <symbol id="icon1">…</symbol> <symbol id="icon2">…</symbol> … </svg> <svg><use xlink:href="icon.svg#icon1"/ ></svg> </body>
40. J04
    ⟃⵸ծ⿫撑ׅ׷״׶⵸ח㹀纏ָ זְה邌爙ׁ׸זְ ז׈ index.html CPEZךꟗׄةؚך湫⵸ח 47(،؎؝ٝ׾㹀纏׃ג׮ծ ⿫撑דֹזְ㉏겗
41. 鍑寸 47(׾ծ)5.-ךCPEZ湫♴חJOMJOFד㙵׭׷
42. 47(
    
    CBDLHSPVOEJNBHFד
 عو׷ 04
43. *&דծCBDLHSPVOETJ[F
    DPWFS
    ֶַָ׃ֻז׷
44. 鍑寸 TWH銲稆ךQSFTFSWF"TQFDU3BUJP׾㢌刿 <svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid slice"> … </svg> * σϑΥϧτͰ͸ "xMidYMid meet"
45. 鍑寸 TWH銲稆ךQSFTFSWF"TQFDU3BUJP׾㢌刿 preserveAspectRatio="xMidYMid slice" = background-size: cover; background-position: center center;
46. [JOEFYדعو׷ 05
47. JOMJOF
    47(ךTWH銲稆׾ծ[JOEFYדⵖ䖴דֹזְ 爳㕦礵莔ךꗺך㡮ծ长遤搀䌢ך갟ֹ֮׶կ尩繎⿽埠ך蔃ך葿ծ渿罏 䗳邜ך椚׾֮׵כׅկֶ׀׸׷➂׮⛉׃ַ׵׆կ׋׌僰ך㢸ך㣄ך׀ ה׃կ׋ֹֽ罏׮鹴חכק׹ןטծמהפח괏ך⵸ך㞒חずׄկ黅ֻ ך殯劉׾הע׵ִלծ兛ך馠넝ծ恌ך桬蜭ծ咿ךワ⟻ծ㇪ך犡㿊ծ ֿ׸׵כ涺ծ傊⚺⯓涽ך佟ח׮䖞כ׆ծ嚂׃׫׾噰׭ծ镡׭׾׮䙼מ Ⰵ׸׆ծ㣓♴ך✉׸׿ֿה׾䝎׵׆׃גծ孖꟦ך䟴ס׷הֿ׹׾濼׵ ׂא׃ַלծ⛉׃ַ׵׆׃גծ❕ׄח׃罏ו׮ז׶կ
    z-index: 100; z-index: 50;
48. 47(ד⢪ִ׷$44فٗػذ؍כ寸ת׏גְ׷ ז׈ www.w3.org/TR/SVG/propidx.html
49. 鍑寸 47(銲稆׾ծ)5.-ך銲稆ד㔲׏גⵖ䖴 爳㕦礵莔ךꗺך㡮ծ长遤搀䌢ך갟ֹ֮׶կ尩繎⿽埠ך蔃ך葿ծ渿罏 䗳邜ך椚׾֮׵כׅկֶ׀׸׷➂׮⛉׃ַ׵׆կ׋׌僰ך㢸ך㣄ך׀ ה׃կ׋ֹֽ罏׮鹴חכק׹ןטծמהפח괏ך⵸ך㞒חずׄկ黅ֻ ך殯劉׾הע׵ִלծ兛ך馠넝ծ恌ך桬蜭ծ咿ךワ⟻ծ㇪ך犡㿊ծ ֿ׸׵כ涺ծ傊⚺⯓涽ך佟ח׮䖞כ׆ծ嚂׃׫׾噰׭ծ镡׭׾׮䙼מ Ⰵ׸׆ծ㣓♴ך✉׸׿ֿה׾䝎׵׆׃גծ孖꟦ך䟴ס׷הֿ׹׾濼׵ ׂא׃ַלծ⛉׃ַ׵׆׃גծ❕ׄח׃罏ו׮ז׶կ
    z-index: 100; z-index: 50; EJW
50. 47(ךذؗأزדعو׷ 06
51. $ISPNFדծ47(簭㼭儗חذؗأزָֻ׆׸׷
52. 剑㼭ؿؓٝز؟؎ؤ鏣㹀ָ剣⸬׌ַ׵ ז׈
53. 鍑寸 ذؗأز׾،ؐزٓ؎ٝ⻉
    ׅ׷ ׋׌׃ծ
 ؿ؋؎ٕ؟؎ؤָ慧㟓ׅ׷ךדծ ؽحزوحف⻉ָكة٦ַ׮
54. 㺘滠ׇׁ׋ػأךꥴ꟦ד عو׷ 07
55. נ׏׋׶ֻ׏אְגְ׷כ׆ךػأず㡦ծ
    ז׈ַꥴ꟦ָדֹג׃תֲ
56. 鍑寸 눤岀ךMUFSד♧涪鍑寸 <filter id="polycleaner" color-interpolation-filters="sRGB"> <feComponentTransfer> <feFuncA type="table" tableValues="0 0.5 1 1" /> </feComponentTransfer> </filter>
57. before after
58. http://codepen.io/grayghostvisuals/pen/JKmRwY
59. BVUPQSFYFSדعو׷ 08
60. 47(דכ歗⫷זו׾$44
    DMJQQBUIדوأؙדֹ׷ = + JNBHF銲稆 DMJQ1BUI銲稆
61. <svg viewBox="0 0 250 250"> <image xlink:href="xxx.jpg" … class="clip-svg"/> </svg> .clip-svg { clip-path: url(#clipping); } <svg width="0" height="0"> <defs> <clipPath id="clipping"> <polygon … /> </clipPath> </defs> </svg> JNBHF銲稆 وأؙ欽ךDMJQ1BUI銲稆 $44
62. 4BGBSJדכծكٝت٦فٔؿ؍حؙأ➰ָֹ
 ⢘鎸׃ג֮׷הوأָؙ⸬ַזְ ז׈ -webkit-clip-path: url(#clipping); clip-path: url(#clipping); -webkit-clip-path: url(#clipping); clip-path: url(#clipping);
63. 鍑寸 ˖ 搀椚ׇ׆ծ47(ךDMJQQBUI㾩䚍׾⢪ֲ
    ˖ BVUPQSFYFS׾麓⥋׃זְ <defs> <clipPath id="clip"> … </clipPath> </defs> <image xlink:href="xxx.jpg" … clip-path="url(#clip)" />
64. 3FBDUדعو׷ 09
65. 3FBDUדכ⢪ִ׷47(ך銲稆חⵖꣲָ֮׷ ז׈ https://facebook.github.io/react/docs/tags-and-attributes.html
66. 鍑寸 如ך銲稆⟃㢩⢪׻זְ • circle • clipPath • defs • ellipse • g • image • line • linearGradient • mask • path • pattern • polygon • polyline • radialGradient • rect • stop • svg • text • tspan
67. 鍑寸 TZNCPM銲稆ծVTF銲稆כ⢪ִזְךדծ
    3FBDUDSFBUF$MBTT
    ד؝ٝه٦طٝز⻉ const IconUmbrella = React.createClass({ render() { return ( <svg className="umbrella" xmlns="http://www.w3.org/ 2000/svg" width="32" height="32" viewBox="0 0 32 32" aria- labelledby="title"><title id="title">Umbrella Icon</title><path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.82… z"/></svg> ) } }); https://css-tricks.com/creating-svg-icon-system-react/
68. 鍑寸 3FBDU
    
    ַ׵ծׅץגך47(銲稆ה㾩䚍ָ
 אִַ׷״ֲחז׶ת׃׋ https://facebook.github.io/react/docs/tags-and-attributes.html
69. 47(ךت؎ؒحزד
 عو׷ 10
70. וֲ׃ג׮ծ47(ؿ؋؎ٕ؟؎ؤָ㣐ֹֻז׷
71. 鍑寸 ˖ ،ٝؕ٦ه؎ٝزך侧׾幾׵ׅ
    ˖ ׉׸׊׸ך䏟垥׾侭侧⦼חさ׻ׇ׷
72. 鍑寸 <rect x="80" y="40" fill="#FFCC00" width="30" height="30"/> <path fill="#FFCC00" d="M201.3,61.8c-3.3-18.1,7-36.8,..."/> <polygon points="43.3,67.8 86.6,142.8 ..." fill="#FFCC00"/> QBUI銲稆ח㢌䳔׃ծ㾩䚍ך鎸鶢갫׾䲧ִծ
    H[JQ㖇簭׾遤ֲ
73. 鍑寸 ؝٦سⰻחずׄ鎸鶢皘䨽ָ㢳ְקוծ
 㖇簭⸬桦כぢ♳ׅ׷ <path fill="#FC0" d="M80 40h30v30H80z"/> <path fill="#FC0" d="M201.3 61.8c-3.3-18.1 7-36.8…"/> <path fill="#FC0" d="M43.3 67.8l43.3 75H0"/>
74. ְַָד׃׋ד׃׳ֲַ
75. չ47(ծ׭׿וְֻׁזպ ה䙼׻׸ת׃׋י
76. ׉׿זהֹכծ
    䩛㛙ְ⢪ְ倯ַ׵כׄ׭׷
77. ˖ ⽃杝ך47(ؿ؋؎ٕ
    ˖ TWH銲稆חכծWJFX#PY
    XJEUI
    IFJHIU㾩䚍׾䭷㹀
    ˖ )5.-ךJNH銲稆ד⢪ֲ
78. J04 ֿ׸ז׵ծוךـٓؐؠד׮קר㣐♱㣗
80. IUUQCJUMZMQTWHMJOL
81. 吳䒭⠓爡תר׹׃
    匟歊湫埠 ֮׶ָהֲ׀ְׂת׃׋