Dive into SVG

Transcript

1. 
2. ͓΍·͖ͩ͋ͻΖ খࢁాߊߒ UXJUUFS!ZPNPUTV גࣜձࣾϐΫηϧάϦου .JDSPTPGU
   .71
   GPS
   *&
3. ޙ൒ͷྲྀΕ  5SBOTGPSN  -JOL  4UZMJOH  'JMUFS  "OJNBUJPO  4DSJQU  &NCFE  ·ͱΊ 
4. USBOTGPSN Ҡಈɺ֦େॖখɺճసɺεΩϡʔ 
7. <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path d="..." transform="skewX(45)"/> 
8. <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path d="..." transform="skewX(45)"/> 
9. <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path d="..." transform="skewX(45)"/> 
10. transform="scale(1.5) rotate(45)" 
11. TDBMF  USBOTMBUF   SPUBUF    TLFX9  TLFX:  NBUSJY       ֦େॖখ Ҡಈ ճసͱͦͷத৺ εΩϡʔ ࣼ܏ม׵
    ԣ εΩϡʔ ࣼ܏ม׵
    ॎ ߦྻม׵
12.  selector { -webkit-transform : rotate(45deg); -moz-transform : rotate(45deg); -ms-transform : rotate(45deg); -o-transform : rotate(45deg); transform : rotate(45deg); }
14. Ҡಈɺ֦େॖখɺճసɺεΩϡʔ ଐੑͰࢦఆ͢Δ 
15. MJOL 
19. <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> 
20. <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> 
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> 
22. <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> 
23. <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> 
24. <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> 
25. )5.-ͷBཁૉʹࣅ͍ͯΔ ܗঢ়ʹ߹ΘͤͨϦϯΫ൑ఆ 9-JOLͷ࢓૊ΈΛ࢖͏ͨΊ ໊લۭؒΛએݴ͢Δ 
26. 4UZMJOH 
28. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg> 
29. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg> 
30. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg> 
31. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg> 
32. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg> 
33. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg> 
34. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style> </defs> <path id="sample" d="..." /> </svg> 
35. EJTQMBZ pMM pMMSVMF pMMPQBDJUZ TUSPLF TUSPLFXJEUI දࣔ ృΓ৭ ಺ଆɺ֎ଆɺॏͳΓͷృΓํ ృΓ৭ͷෆಁ໌౓ ࿮ઢͷ৭ ࿮ઢͷ෯
36. ॻ͖ํ͸Ұൠͷ$44ͱಉ͡ ϓϩύςΟʔ͸47(ಠࣗ 
37. path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } } 
38. path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } } 
39. path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } } 
41. ٖࣅΫϥε͕༗ޮ ϝσΟΞΫΤϦʔ͕༗ޮ 
42. pMUFS
    F⒎FDUT 
46. <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> 
47. <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> 
48. <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> 
49. <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> 
50. <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> 
51. <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> 
52. <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> 
53. <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> 
54. <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> 
56. ݪ࢝ϑΟϧλʔ
57. <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> 
58. GF#MFOE GF$PMPS.BUSJY GF'MPPE GF(BVTTJBO#MVS GF.FSHF GF0⒎TFU ࠞ߹ ৭ͷߦྻม׵ ృΓͭͿ͠ ΅͔͠ ߹੒ ҐஔͣΒ͠
59. ݪ࢝ϑΟϧλʔ૊Έ߹Θͤྫ
63. in="sourceAplha"
64. <feGaussianBlur/>
65. <feOffet/>
66. in="sourceGraphic"
67. <feMerge/>
69. <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> 
70. <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> 
71. <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> 
72. <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> 
73. <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> 
74. <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> 
75. <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> 
77. ༷ʑͳࢹ֮ޮՌ ݪ࢝ϑΟϧλʔΛ૊Έ߹ΘͤΔ $44Ͱ΋ར༻Մೳ 
78. "OJNBUJPO
    4.*- 
81. <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/> 
82. <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/> 
83. <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/> 
84. <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/> 
85. <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/> 
86. <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion> </rect> <path id="guide" d="..."/> 
87. ৭΍ҐஔΛΞχϝʔγϣϯ มܗ༻Ξχϝʔγϣϯ ύεʹԊͬͨҠಈͷΞχϝʔγϣϯ 
88. 4DSJQU 
90. <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> 
91. εΫϦϓτ΋ಈ͘ Ϛ΢εͷҐஔΛऔಘ͢ΔͳͲ΋Մೳ K2VFSZ͸ಈ͔ͳ͍ 
92. &NCFE 
94. ը૾ͱͯ͠ಡΈࠐΉ
95. <body> <h1>img ཁૉͰຒΊࠐΉ</h1> <img src="image.svg" alt=""> </body> 
96. <body> <h1>img ཁૉͰຒΊࠐΉ</h1> <img src="image.svg" alt=""> </body> 
97. υΩϡϝϯτͱͯࠞ͠ࡏ
98. <body> <h1>img ཁૉͰຒΊࠐΉ</h1> <svg width="300" height="300"> <path d="..." /> <path d="..." /> <path d="..." /> </svg> </body> 
99. <body> <h1>img ཁૉͰຒΊࠐΉ</h1> <svg width="300" height="300"> <path d="..." /> <path d="..." /> <path d="..." /> </svg> </body> 
100. ॻ͍ͨඳ͍ͨ47(͸)5.-Ͱ࢖͑Δ ը૾ͱͯ͠ υΩϡϝϯτͱͯ͠ 
101.  ิ଍
103. 3BQIBËMŠ+BWB4DSJQU
     -JCSBSZ IUUQSBQIBFMKTDPN
104. ·ͱΊ 
105. )5.-ͱ47(͸ࣅ͍ͯΔ
106. ͋ͨΒ͍͠6*͕Ͱ͖Δʂ
107. ϐΫηϧάϦου খࢁా
     ߊߒ
     
     ֎ଜ
     ࿨ਔ