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. ղઆ 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
  2. /4@&3303@'"*-63& 23 /* Returned when a function fails */ 24

    ERROR(NS_ERROR_FAILURE, 0x80004005), NP[JMMBYQDPNCBTF&SSPS-JTUI ԿΒ͔ͷݪҼͰؔ਺ͷ࣮ߦ͕ࣦഊͨ࣌͠ͷΤϥʔ
  3. όά࠶ݱํ๏ • ํ๏̍ • υΩϡϝϯτʹ·ͩ௥Ճ͞Ε͍ͯͳ͍ ཁૉʹରͯ͠HFU##PY ϝιουΛݺͼग़͢ • ํ๏̎ •

    υΩϡϝϯτʹ௥Ճ͞Ε͍ͯΔ͕ display: noneͳཁૉʹରͯ͠ HFU##PY ϝιουΛݺͼग़͢
  4. ରࡦUSZDBUDIจͰғΉ try { var textElm = document.getElementById('text'); var box =

    textElm.getBBox(); } catch (e) { alert(e); } /4@&3303@'"*-63&͸USZDBUDIͰิ଍Մೳ
  5. ରࡦEJTQMBZϓϩύςΟΛ֬ೝ͢Δ var textElm = document.getElementById('text'); if (getComputedStyle(textElm, null).display !== ‘none’)

    { var box = textElm.getBBox(); } getBBox()ϝιουΛݺͼग़͢લʹ display: noneͰͳ͍͜ͱΛ֬ೝ
  6. ରࡦUTQBOཁૉΛ࢖͏ <svg witdh=100 height=100> <text>͜Ε͸ંΓฦ͞ΕͨςΩετͰ͢ɻϥʔϝϯ͕৯΂͍ͨɻ</text> </svg> <svg witdh=100 height=100> <text>

    <tspan>͜Ε͸ંΓฦ͞ΕͨςΩετͰ͢ɻ</tspan> <tspan>ϥʔϝϯ͕৯΂͍ͨɻ</tspan> </text> </svg> จࣈྻΛෳ਺ͷཁૉʹ෼ׂ
  7. ෯Λ௒͔͑ͨͲ͏͔ͷ൑ఆ for (var i = 0; i < words.length; i++)

    { tspanEl.textContent += word if (tspanEl.getComputedTextLength() > width) { // ௒͑ͨ } else { // ௒͑ͯͳ͍ } } HFU$PNQVUFE5FYU-FOHUI Ͱ෯Λऔಘ
  8. ݁Ռ͜͏ͳΔ <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>
  9. ํ๏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Ͱ͸ԑ͕දࣔ͞Εͳ͍
  10. ζʔϜͷ࢓૊Έ <svg witdh=100 height=100> <g transform=”scale(ഒ཰)”> <circle /> <circle />

    <circle /> <text /> <text /> </g> </svg> શମΛғΉgཁૉͷtransformଐੑΛૢ࡞͢Δ
  11. ରࡦจࣈαΠζΛಈతʹมߋ $elm.on(‘mousewheel’, function() { // ུ var scale = ݱࡏͷഒ཰

    var originalFontSize = 24; var currentFontSize = originalFontSize / scale; // ུ (textཁૉͷfontαΠζมߋॲཧ) } ໰୊఺ɿtextཁૉͷ਺͕ଟ͍ͱॲཧ͕ॏͨ͘ͳΔ
  12. ରࡦจࣈαΠζมߋΛ஗Ԇ 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); } Ϛ΢εϗΠʔϧΠϕϯτ͕࿈ଓͯ͠ൃੜ͍ͯ͠Δͱ͖͸ จࣈαΠζΛมߋ͠ͳ͍