Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

kadoppe
October 12, 2013

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

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

kadoppe

October 12, 2013
Tweet

More Decks by kadoppe

Other Decks in Technology

Transcript

  1. *OMJOF47(τϥϒϧͱͦͷରࡦ ୈճ)5.-ͳͲษڧձ!LBEPQQF

  2. ࣗݾ঺հ • ໊લ • ໳࿬߃ฏ!LBEPQQF • ৬ۀ • ιϑτ΢ΣΞΤϯδχΞ •

    ॴଐ • גࣜձࣾγΣΞ΢Οζ)5.-8&45KQ
  3. ຊ೔ͷεϥΠυ • 4MJEF4IBSF • IUUQXXXTMJEFTIBSFOFULBEPQQF

  4. ΞδΣϯμ • 47(ͱ*OMJOF47( • ͳͥ*OMJOF47(Λ࢖ͬͨͷ͔ • τϥϒϧͱରࡦ • ֶΜͩ͜ͱɾڭ܇

  5. 47(ͱ*OMJOF47(

  6. 47(ͱ͸ • 44DBMBCMFʢ֦େՄೳͳʣ • 77FDUPSʢϕΫλʔܗࣜͷʣ • ((SBQIJDʢը૾ʣ • ௚༁͢Δͱʮ֦େՄೳͳϕΫλʔը૾ʯ

  7. ಛ௃֦େɾॖখͯ͠΋͖Ε͍ ఺Ͱը૾Λදݱ ઢͰը૾Λදݱ

  8. ಛ௃9.-ܗࣜͷϑΥʔϚοτ • 9.-ཁૉͰԁ΍ઢͳͲͷܗΛදݱ • ςΩετΤσΟλͰฤूՄೳ

  9. *OMJOF47(ͱ͸ • )5.-͔Βͷ৽ػೳ • )5.-υΩϡϝϯτʹ47(ϚʔΫΞοϓ ΛຒΊࠐΈՄೳʹ

  10. *OMJOF47(ͷαϯϓϧ <html> <body> <h1>Inline SVGαϯϓϧ</h1> <svg width=100 height=100> <circle r=50

    cx=50 cy=50 /> </svg> </body> </html>
  11. *OMJOF47(ͷϝϦοτ • ը૾ͷϧοΫΞϯυϑΟʔϧΛ$44Ͱ มߋՄೳ • ԁͷ৭ɺઢͷଠ͞Λม͑ΔɺͳͲ • ը૾಺ͷ֤ཁૉʹର͢ΔϢʔβૢ࡞Λ +BWB4DSJQUͰϋϯυϦϯάՄೳ •

    Ϛ΢εΫϦοΫɺυϥοάͳͲʹର͢Δॲཧ
  12. ར༻Մೳͳϒϥ΢β ϒϥ΢β ରԠόʔδϣϯ *OUFSOFU&YQMPSFS Ҏ߱ 'JSFGPY Ҏ߱ $ISPNF Ҏ߱ 4BGBSJ

    Ҏ߱ J044BGBSJ Ҏ߱ "OESPJE Ҏ߱
  13. +BWB4DSJQUϥΠϒϥϦ • %KTIUUQEKTPSH • 8FCϖʔδͰσʔλϏδϡΞϥΠθʔγϣϯ • 3BQIBËMIUUQSBQIBFMKTDPN • 8FCϖʔδ্ͰϕΫλʔը૾Λಈతʹੜ੒

  14. 8FCʹ͓͚Δ47(ͷ׆༻ࣄྫ • ׆༻ྫ̍ • ϩΰ΍ΞΠίϯը૾ • ׆༻ྫ̎ • ΠϯλϥΫςΟϒͳ8FCΞϓϦέʔγϣϯ

  15. ϩΰ΍ΞΠίϯը૾

  16. ϩΰ΍ΞΠίϯը૾

  17. 8FCΞϓϦέʔγϣϯ ແྉֶशαΠτ4IBSF8JTIUUQTIBSFXJTDPN

  18. ͳͥ*OMJOF47(Λ ࢖ͬͨͷ͔

  19. 4IBSF8JT։ൃલͷཁ݅ • (PPHMFϚοϓͷΑ͏ͳ6*্ʹ ίϯςϯπΛ഑ஔ • Ϛ΢εૢ࡞ʹԠ֤ͯ͡ίϯςϯπ͕ Ξχϝʔγϣϯ • J1BEͷ4BGBSJʹରԠ •

    ݹ͍ϒϥ΢βʢ*&ҎԼʣ͸ඇରԠ
  20. ར༻͢Δٕज़ͷબ୒ࢶ • 'MBTI • (PPHMF.BQT+BWB4DSJQU"1* ΧελϜΦʔόϨΠʣ • *OMJOF47(

  21. ར༻͢Δٕज़ͷબ୒ࢶ • 'MBTI • (PPHMF.BQT+BWB4DSJQU"1* ΧελϜΦʔόϨΠʣ • *OMJOF47(

  22. τϥϒϧͱରࡦ *OMJOF47(͔Β࢝·Δҵͷಓ

  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ʹόάใࠂ͋Γ • #VH4VQQPSUUIFUFYU EFDPSBUJPOQSPQFSUZJO47( 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ཁૉͷ࢝఺ɾऴ఺Λܭࢉ )FMMP8PSME
  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ʹόάใࠂ͋Γ • #VH47(-PDBUBCMFHFU##PY  GBJMTVOMFTTUIF47(FMFNFOUJUJTBQQMJFEUP JTBUUBDIFEBOESFOEFSFEIUUQT 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. ͦΜͳ*OMJOF47(͸ ࢖ָ͍͍ٕͬͯͯ͠ज़

  70. ΈΜͳ΋ͬͱ ࢖ͬͯ৘ใަ׵͠Α͏

  71. ͓͠·͍