Inline SVG - トラブルとその対策

2013/10/12に大阪で開催された「第8回 HTML5など勉強会」で使用したプレゼンテーション資料です。

Transcript

1. *OMJOF
   47(
   
   τϥϒϧͱͦͷରࡦ 
   ୈճ)5.-ͳͲษڧձ
   !LBEPQQF
2. ࣗݾ঺հ • ໊લ • ໳࿬
   ߃ฏ
   !LBEPQQF • ৬ۀ • ιϑτ΢ΣΞΤϯδχΞ • ॴଐ • גࣜձࣾγΣΞ΢Οζ
   
   )5.-8&45KQ
3. ຊ೔ͷεϥΠυ • 4MJEF4IBSF • IUUQXXXTMJEFTIBSFOFULBEPQQF
4. ΞδΣϯμ • 47(ͱ*OMJOF
   47( • ͳͥ*OMJOF
   47(Λ࢖ͬͨͷ͔ • τϥϒϧͱରࡦ • ֶΜͩ͜ͱɾڭ܇
5. 47(ͱ*OMJOF
   47(
6. 47(ͱ͸ • 4
   4DBMBCMFʢ֦େՄೳͳʣ • 7
   7FDUPSʢϕΫλʔܗࣜͷʣ • (
   (SBQIJDʢը૾ʣ • ௚༁͢Δͱʮ֦େՄೳͳϕΫλʔը૾ʯ
7. ಛ௃
   ֦େɾॖখͯ͠΋͖Ε͍ ఺Ͱը૾Λදݱ ઢͰը૾Λදݱ
8. ಛ௃
   9.-ܗࣜͷϑΥʔϚοτ • 9.-ཁૉͰԁ΍ઢͳͲͷܗΛදݱ • ςΩετΤσΟλͰฤूՄೳ
9. *OMJOF
   47(ͱ͸ • )5.-
   ͔Βͷ৽ػೳ • )5.-υΩϡϝϯτʹ47(ϚʔΫΞοϓ ΛຒΊࠐΈՄೳʹ
10. *OMJOF
    47(ͷαϯϓϧ <html> <body> <h1>Inline SVGαϯϓϧ</h1> <svg width=100 height=100> <circle r=50 cx=50 cy=50 /> </svg> </body> </html>
11. *OMJOF
    47(ͷϝϦοτ • ը૾ͷϧοΫΞϯυϑΟʔϧΛ$44Ͱ มߋՄೳ • ԁͷ৭ɺઢͷଠ͞Λม͑ΔɺͳͲ • ը૾಺ͷ֤ཁૉʹର͢ΔϢʔβૢ࡞Λ +BWB4DSJQUͰϋϯυϦϯάՄೳ • Ϛ΢εΫϦοΫɺυϥοάͳͲʹର͢Δॲཧ
12. ར༻Մೳͳϒϥ΢β ϒϥ΢β ରԠόʔδϣϯ *OUFSOFU
    &YQMPSFS Ҏ߱ 'JSFGPY Ҏ߱ $ISPNF Ҏ߱ 4BGBSJ Ҏ߱ J04
    4BGBSJ Ҏ߱ "OESPJE Ҏ߱
13. +BWB4DSJQUϥΠϒϥϦ • %KT
    
    IUUQEKTPSH • 8FCϖʔδͰσʔλϏδϡΞϥΠθʔγϣϯ • 3BQIBËM
    
    IUUQSBQIBFMKTDPN • 8FCϖʔδ্ͰϕΫλʔը૾Λಈతʹੜ੒
14. 8FCʹ͓͚Δ47(ͷ׆༻ࣄྫ • ׆༻ྫ̍ • ϩΰ΍ΞΠίϯը૾ • ׆༻ྫ̎ • ΠϯλϥΫςΟϒͳ8FCΞϓϦέʔγϣϯ
15. ϩΰ΍ΞΠίϯը૾
16. ϩΰ΍ΞΠίϯը૾
17. 8FCΞϓϦέʔγϣϯ ແྉֶशαΠτ
    4IBSF8JT
    IUUQTIBSFXJTDPN
18. ͳͥ*OMJOF
    47(Λ ࢖ͬͨͷ͔
19. 4IBSF8JT։ൃલͷཁ݅ • (PPHMFϚοϓͷΑ͏ͳ6*্ʹ ίϯςϯπΛ഑ஔ • Ϛ΢εૢ࡞ʹԠ֤ͯ͡ίϯςϯπ͕ Ξχϝʔγϣϯ • J1BEͷ4BGBSJʹରԠ • ݹ͍ϒϥ΢βʢ*&
    ҎԼʣ͸ඇରԠ
20. ར༻͢Δٕज़ͷબ୒ࢶ • 'MBTI • (PPHMF
    .BQT
    +BWB4DSJQU
    "1* ΧελϜΦʔόϨΠʣ • *OMJOF
    47(
21. ར༻͢Δٕज़ͷબ୒ࢶ • 'MBTI • (PPHMF
    .BQT
    +BWB4DSJQU
    "1* ΧελϜΦʔόϨΠʣ • *OMJOF
    47(
22. τϥϒϧͱରࡦ *OMJOF
    47(͔Β࢝·Δҵͷಓ
23. ΍Γ͔ͨͬͨ͜ͱʢ̍ʣ UFYUཁૉʹԼઢΛҾ͘
24. text-decorationଐੑ <svg witdh=100 height=100> <text text-decoration=underline x=0 y=20>Hello World</text> </svg> Լઢ͕දࣔ͞ΕΔ
25. ൃੜͨ͠τϥϒϧ 'JSFGPYͰԼઢ͕ දࣔ͞Εͳ͍
26. ݪҼௐࠪ • #VH[JMMB!.P[JMMBʹόάใࠂ͋Γ • #VH
    
    
    4VQQPSU
    UIF
    UFYU EFDPSBUJPO
    QSPQFSUZ
    JO
    47(
    VOEFSMJOF
    FUD
    
    
    IUUQTCVH[JMMBNP[JMMBPSHTIPX@CVHDHJ JE • ใࠂ೔
     • 47(
    5FYUͷϨϯμϦϯάํ๏ͷ໰୊
27. ରࡦ
    lineཁૉͰԼઢΛҾ͘ • खॱ  textཁૉͷେ͖͞ʢߴ͞ͱ෯ʣΛgetBBox() ϝιουΛ࢖ͬͯऔಘ  ద੾ͳ࠲ඪʹlineཁૉΛૠೖ
28. ղઆ var textElm = document.getElementById('text'); var box = textElm.getBBox(); alert(box.height); // textཁૉͷߴ͞ alert(box.width); // textཁૉͷ෯ <svg> <text x=0 y=20>Hello World</text> <line x1=X1 y1=Y1 x2=X2 y2=Y2 /> </svg> ߴ͞ͱ෯Λ΋ͱʹ lineཁૉͷ࢝఺ɾऴ఺Λܭࢉ )FMMP
    8PSME
29. ʲ࿕ใʳ
30. ରࡦ
    ৽͍͠'JSFGPYΛ͔ͭ͏ • 'JSFGPY
    
    • 
    ϦϦʔε༧ఆ • ଴๬ͷtextཁૉͷԼઢදࣔʹରԠ
31. ΍Γ͔ͨͬͨ͜ͱʢ̎ʣ ཁૉͷେ͖͞Λऔಘ͢Δ
32. getBBox()ϝιου var textElm = document.getElementById('text'); var box = textElm.getBBox(); alert(box.height); // textཁૉͷߴ͞ alert(box.width); // textཁૉͷ෯
33. ൃੜͨ͠τϥϒϧ 'JSFGPYͰ /4@&3303@'"*-63&
34. /4@&3303@'"*-63& ҙຯ ʮͳΜ͔Τϥʔʯ
35. /4@&3303@'"*-63& 23 /* Returned when a function fails */ 24 ERROR(NS_ERROR_FAILURE, 0x80004005), NP[JMMBYQDPNCBTF&SSPS-JTUI ԿΒ͔ͷݪҼͰؔ਺ͷ࣮ߦ͕ࣦഊͨ࣌͠ͷΤϥʔ
36. ݪҼௐࠪ • #VH[JMMB!.P[JMMBʹόάใࠂ͋Γ • #VH
    
    
    47(-PDBUBCMFHFU##PY
    GBJMT
    VOMFTT
    UIF
    47(
    FMFNFOU
    JU
    JT
    BQQMJFE
    UP
    JT
    BUUBDIFE
    BOE
    SFOEFSFE
    
    
    IUUQT CVH[JMMBNP[JMMBPSHTIPX@CVHDHJ JE
37. όά࠶ݱํ๏ • ํ๏̍ • υΩϡϝϯτʹ·ͩ௥Ճ͞Ε͍ͯͳ͍ ཁૉʹରͯ͠HFU##PY ϝιουΛݺͼग़͢ • ํ๏̎ • υΩϡϝϯτʹ௥Ճ͞Ε͍ͯΔ͕ display: none
    ͳཁૉʹରͯ͠ HFU##PY ϝιουΛݺͼग़͢
38. ରࡦ
    USZDBUDIจͰғΉ try { var textElm = document.getElementById('text'); var box = textElm.getBBox(); } catch (e) { alert(e); } /4@&3303@'"*-63&͸USZDBUDIͰิ଍Մೳ
39. ରࡦ
    EJTQMBZϓϩύςΟΛ֬ೝ͢Δ var textElm = document.getElementById('text'); if (getComputedStyle(textElm, null).display !== ‘none’) { var box = textElm.getBBox(); } getBBox()ϝιουΛݺͼग़͢લʹ display: noneͰͳ͍͜ͱΛ֬ೝ
40. ΍Γ͔ͨͬͨ͜ͱʢʣ ςΩετΛંΓฦ͢
41. UFYUཁૉͷจࣈྻΛંΓฦ͢ ͜Ε͸ંΓฦ͞ΕͨςΩετͰ͢ɻϥʔϝ ϯ͕৯΂͍ͨɻແమ๒ͷϥʔϝϯ͕৯΂ͨ ͍Ͱ͢ɻ ԣ෯Λࢦఆͯ͠ςΩετΛࣗಈͰંΓฦ͠
42. ൃੜͨ͠τϥϒϧ ςΩετ͕ંΓฦ͞Εͳ͍ ͜Ε͸ંΓฦ͞ΕͨςΩετͰ͢ɻϥʔϝϯ͕৯΂͍ͨ
43. ݪҼௐࠪ • 47(ͷ࢓༷Ͱ͢ • 47(ͷUFYUཁૉ͸)5.-ͷEJWཁૉΈ͍ͨʹ ࣗಈͰจࣈྻΛંΓฦͯ͘͠Εͳ͍ • UFYU"SFBཁૉ • ࣗಈંΓฦ͠ʹରԠͨ͠UFYUཁૉ • ·ͩͲͷϒϥ΢β΋ରԠ͍ͯ͠ͳ͍
44. ରࡦ
    UTQBOཁૉΛ࢖͏ <svg witdh=100 height=100> <text>͜Ε͸ંΓฦ͞ΕͨςΩετͰ͢ɻϥʔϝϯ͕৯΂͍ͨɻ</text> </svg> <svg witdh=100 height=100> <text> <tspan>͜Ε͸ંΓฦ͞ΕͨςΩετͰ͢ɻ</tspan> <tspan>ϥʔϝϯ͕৯΂͍ͨɻ</tspan> </text> </svg> จࣈྻΛෳ਺ͷཁૉʹ෼ׂ
45. ৄ͍͠खॱ จࣈྻΛ୯ޠ୯Ґʹ෼ׂ ࢦఆ͞Εͨ෯Λ௒͑Δ·Ͱ ̍୯ޠͣͭUTQBOཁૉʹ௥Ճ ௒͑ͨΒ຤ඌͷ୯ޠΛ࡟আͯ͠ UTQBOཁૉͷҐஔΛௐ੔ ̎ʹ໭Δ
46. ෯Λ௒͔͑ͨͲ͏͔ͷ൑ఆ for (var i = 0; i < words.length; i++) { tspanEl.textContent += word if (tspanEl.getComputedTextLength() > width) { // ௒͑ͨ } else { // ௒͑ͯͳ͍ } } HFU$PNQVUFE5FYU-FOHUI Ͱ෯Λऔಘ
47. ݁Ռ͜͏ͳΔ <svg witdh=100 height=100> <text> <tspan x=0 dy=”18”>͜Ε͸ંΓฦ͞Εͨ</tspan> <tspan x=0 dy=”18”>ςΩετͰ͢ɻϥʔ</tspan> <tspan x=0 dy=”18”>ϝϯ͕৯΂͍ͨɻ</tspan> </text> </svg>
48. ΍Γ͔ͨͬͨ͜ͱʢʣ ԑऔΓจࣈΛදࣔ͢Δ
49. ԑऔΓจࣈ ϥʔϝϯ͕৯΂͍ͨ ϥʔϝϯ͕৯΂͍ͨ
50. ൃੜͨ͠τϥϒϧ ԑऔΓจࣈΛ؆୯ʹ දࣔͰ͖ͳ͍
51. ݪҼௐࠪ • textཁૉʹԑऔΓΛ௥Ճ͢Δ ศརͳϓϩύςΟ͕ଘࡏ͠ͳ͍
52. ํ๏
    text-shadow <svg witdh=100 height=100> <text>ϥʔϝϯ͕৯΂͍ͨ</text> </svg> text { fill: white; text-shadow: -1px -1px black, 1px -1px black, -1px 1px black, -1px -1px black; } ɾԑ͕Ԛ͍ ɾ'JSFGPYͰ͸ԑ͕දࣔ͞Εͳ͍
53. ํ๏
    textཁૉΛॏͶΔ <svg witdh=100 height=100> <text class=”outline”>ϥʔϝϯ͕৯΂͍ͨ</text> <text class=”body”>ϥʔϝϯ͕৯΂͍ͨ</text> </svg> .outline { stroke: black; stroke-width: 3px; } .body { fill: white; } UFYUཁૉ͕̎ͭ͋Δͷ͕ จॻͷҙຯతʹ͓͔͍͠
54. • 47(
    'JMUFS • 47(ը૾ʹ༷ʑͳޮՌΛద༻͢Δػೳ • υϩοϓγϟυ΢ɺ৭ͷม׵ͳͲ • ·ͩࢼ͍ͯ͠ͳ͍ͷͰ࣮ݱͰ͖Δ͔ෆ໌ ํ๏
    47(
    'JMUFSΛ࢖͏
55. ΍Γ͔ͨͬͨ͜ͱʢ̑ʣ ζʔϜ࣌ʹจࣈαΠζΛ ݻఆ͢Δ
56. ζʔϜͷ࢓૊Έ <svg witdh=100 height=100> <g transform=”scale(ഒ཰)”> <circle /> <circle /> <circle /> <text /> <text /> </g> </svg> શମΛғΉgཁૉͷtransformଐੑΛૢ࡞͢Δ
57. ζʔϜ
58. ൃੜͨ͠τϥϒϧ ζʔϜ࣌ʹจࣈαΠζ͕ มԽͯ͠͠·͏
59. ςΩετ ςΩετ ςΩετ ςΩετ 0, /( /(
60. ݪҼௐࠪ • 47(ͷ࢓༷Ͱ͢
61. ରࡦ
    จࣈαΠζΛಈతʹมߋ $elm.on(‘mousewheel’, function() { // ུ var scale = ݱࡏͷഒ཰ var originalFontSize = 24; var currentFontSize = originalFontSize / scale; // ུ (textཁૉͷfontαΠζมߋॲཧ) } ໰୊఺ɿtextཁૉͷ਺͕ଟ͍ͱॲཧ͕ॏͨ͘ͳΔ
62. ରࡦ
    จࣈαΠζมߋΛ஗Ԇ var timer = false; $elm.on(‘mousewheel’, function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { var scale = ݱࡏͷഒ཰ var originalFontSize = 24; var currentFontSize = originalFontSize / unscale; // ུ (textཁૉͷจࣈαΠζมߋॲཧ) }, 200); } Ϛ΢εϗΠʔϧΠϕϯτ͕࿈ଓͯ͠ൃੜ͍ͯ͠Δͱ͖͸ จࣈαΠζΛมߋ͠ͳ͍
63. ֶΜͩ͜ͱ
64. 47(
    5FYUʹ͸ τϥϒϧ͕͍ͬͺ͍
65. ˔47(ͷ࢓༷Ͱ͸ʢγϯϓϧʹʣ࣮ݱͰ͖ ͳ͍දݱ͕͋Δ ˔ϒϥ΢βؒͷࠩҟ͕ଘࡏ͢Δ
66. ڭ܇
67. ˔47(Ͱʢγϯϓϧʣʹ࣮ݱͰ͖ͳ͍͜ͱ ͸͠ͳ͍ ˔ϒϥ΢βؒͷࠩҟΛڐ༰͢Δ
68. ͦ͏͠ͳ͍ͱʜ • ίʔυ͕ඞཁҎ্ʹෳࡶʹͳΔ • ύϑΥʔϚϯε௿ԼɾόάൃੜͷݪҼʹ
69. ͦΜͳ*OMJOF
    47(͸ ࢖ָ͍͍ٕͬͯͯ͠ज़
70. ΈΜͳ΋ͬͱ ࢖ͬͯ৘ใަ׵͠Α͏
71. ͓͠·͍