Dive into SVG

3c557c6103a4addc52f7b76ffd0a0f27?s=47 yomotsu
August 21, 2011

Dive into SVG

3c557c6103a4addc52f7b76ffd0a0f27?s=128

yomotsu

August 21, 2011
Tweet

Transcript

  1. 1.

    

  2. 3.

    ޙ൒ͷྲྀΕ  5SBOTGPSN  -JOL  4UZMJOH  'JMUFS 

    "OJNBUJPO  4DSJQU  &NCFE  ·ͱΊ 
  3. 5.
  4. 6.
  5. 11.

    TDBMF  USBOTMBUF   SPUBUF    TLFX9

     TLFX:  NBUSJY       ֦େॖখ Ҡಈ ճసͱͦͷத৺ εΩϡʔ ࣼ܏ม׵ԣ εΩϡʔ ࣼ܏ม׵ॎ ߦྻม׵
  6. 12.

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

    : rotate(45deg); -o-transform : rotate(45deg); transform : rotate(45deg); }
  7. 13.
  8. 15.
  9. 16.
  10. 17.
  11. 18.
  12. 27.
  13. 40.
  14. 43.
  15. 44.
  16. 45.
  17. 55.
  18. 60.
  19. 61.
  20. 62.
  21. 68.
  22. 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> 
  23. 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> 
  24. 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> 
  25. 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> 
  26. 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> 
  27. 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> 
  28. 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> 
  29. 76.
  30. 79.
  31. 80.
  32. 88.
  33. 89.
  34. 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> 
  35. 92.
  36. 93.
  37. 101.
  38. 102.
  39. 104.