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

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

ࣗݾ঺հ • ໊લ • ໳࿬߃ฏ!LBEPQQF • ৬ۀ • ιϑτ΢ΣΞΤϯδχΞ •
ॴଐ • גࣜձࣾγΣΞ΢Οζ)5.-8&45KQ

ຊ೔ͷεϥΠυ • 4MJEF4IBSF • IUUQXXXTMJEFTIBSFOFULBEPQQF

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

47(ͱ*OMJOF47(

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

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

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

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

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

*OMJOF47(ͷϝϦοτ • ը૾ͷϧοΫΞϯυϑΟʔϧΛ$44Ͱ มߋՄೳ • ԁͷ৭ɺઢͷଠ͞Λม͑ΔɺͳͲ • ը૾಺ͷ֤ཁૉʹର͢ΔϢʔβૢ࡞Λ +BWB4DSJQUͰϋϯυϦϯάՄೳ •
Ϛ΢εΫϦοΫɺυϥοάͳͲʹର͢Δॲཧ

ར༻Մೳͳϒϥ΢β ϒϥ΢β ରԠόʔδϣϯ *OUFSOFU&YQMPSFS Ҏ߱ 'JSFGPY Ҏ߱ $ISPNF Ҏ߱ 4BGBSJ
Ҏ߱ J044BGBSJ Ҏ߱ "OESPJE Ҏ߱

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

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

ϩΰ΍ΞΠίϯը૾

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

ͳͥ*OMJOF47(Λ ࢖ͬͨͷ͔

4IBSF8JT։ൃલͷཁ݅ • (PPHMFϚοϓͷΑ͏ͳ6*্ʹ ίϯςϯπΛ഑ஔ • Ϛ΢εૢ࡞ʹԠ֤ͯ͡ίϯςϯπ͕ Ξχϝʔγϣϯ • J1BEͷ4BGBSJʹରԠ •
ݹ͍ϒϥ΢βʢ*&ҎԼʣ͸ඇରԠ

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

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

΍Γ͔ͨͬͨ͜ͱʢ̍ʣ UFYUཁૉʹԼઢΛҾ͘

text-decorationଐੑ <svg witdh=100 height=100> <text text-decoration=underline x=0 y=20>Hello World</text> </svg>
Լઢ͕දࣔ͞ΕΔ

ൃੜͨ͠τϥϒϧ 'JSFGPYͰԼઢ͕ දࣔ͞Εͳ͍

ݪҼௐࠪ • #VH[JMMB!.P[JMMBʹόάใࠂ͋Γ • #VH4VQQPSUUIFUFYU EFDPSBUJPOQSPQFSUZJO47( VOEFSMJOF FUD IUUQTCVH[JMMBNP[JMMBPSHTIPX@CVHDHJ
JE • ใࠂ೔ • 47(5FYUͷϨϯμϦϯάํ๏ͷ໰୊

ରࡦlineཁૉͰԼઢΛҾ͘ • खॱ textཁૉͷେ͖͞ʢߴ͞ͱ෯ʣΛgetBBox() ϝιουΛ࢖ͬͯऔಘ ద੾ͳ࠲ඪʹlineཁૉΛૠೖ

ղઆ 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

ʲ࿕ใʳ

ରࡦ৽͍͠'JSFGPYΛ͔ͭ͏ • 'JSFGPY • ϦϦʔε༧ఆ • ଴๬ͷtextཁૉͷԼઢදࣔʹରԠ

΍Γ͔ͨͬͨ͜ͱʢ̎ʣ ཁૉͷେ͖͞Λऔಘ͢Δ

getBBox()ϝιου var textElm = document.getElementById('text'); var box = textElm.getBBox(); alert(box.height);
// textཁૉͷߴ͞ alert(box.width); // textཁૉͷ෯

ൃੜͨ͠τϥϒϧ 'JSFGPYͰ /4@&3303@'"*-63&

/4@&3303@'"*-63& ҙຯ ʮͳΜ͔Τϥʔʯ

/4@&3303@'"*-63& 23 /* Returned when a function fails */ 24
ERROR(NS_ERROR_FAILURE, 0x80004005), NP[JMMBYQDPNCBTF&SSPS-JTUI ԿΒ͔ͷݪҼͰؔ਺ͷ࣮ߦ͕ࣦഊͨ࣌͠ͷΤϥʔ

ݪҼௐࠪ • #VH[JMMB!.P[JMMBʹόάใࠂ͋Γ • #VH47(-PDBUBCMFHFU##PY GBJMTVOMFTTUIF47(FMFNFOUJUJTBQQMJFEUP JTBUUBDIFEBOESFOEFSFEIUUQT CVH[JMMBNP[JMMBPSHTIPX@CVHDHJ JE

όά࠶ݱํ๏ • ํ๏̍ • υΩϡϝϯτʹ·ͩ௥Ճ͞Ε͍ͯͳ͍ ཁૉʹରͯ͠HFU##PY ϝιουΛݺͼग़͢ • ํ๏̎ •
υΩϡϝϯτʹ௥Ճ͞Ε͍ͯΔ͕ display: noneͳཁૉʹରͯ͠ HFU##PY ϝιουΛݺͼग़͢

ରࡦUSZDBUDIจͰғΉ try { var textElm = document.getElementById('text'); var box =
textElm.getBBox(); } catch (e) { alert(e); } /4@&3303@'"*-63&͸USZDBUDIͰิ଍Մೳ

ରࡦEJTQMBZϓϩύςΟΛ֬ೝ͢Δ var textElm = document.getElementById('text'); if (getComputedStyle(textElm, null).display !== ‘none’)
{ var box = textElm.getBBox(); } getBBox()ϝιουΛݺͼग़͢લʹ display: noneͰͳ͍͜ͱΛ֬ೝ

΍Γ͔ͨͬͨ͜ͱʢʣ ςΩετΛંΓฦ͢

UFYUཁૉͷจࣈྻΛંΓฦ͢ ͜Ε͸ંΓฦ͞ΕͨςΩετͰ͢ɻϥʔϝ ϯ͕৯΂͍ͨɻແమ๒ͷϥʔϝϯ͕৯΂ͨ ͍Ͱ͢ɻ ԣ෯Λࢦఆͯ͠ςΩετΛࣗಈͰંΓฦ͠

ൃੜͨ͠τϥϒϧ ςΩετ͕ંΓฦ͞Εͳ͍ ͜Ε͸ંΓฦ͞ΕͨςΩετͰ͢ɻϥʔϝϯ͕৯΂͍ͨ

ݪҼௐࠪ • 47(ͷ࢓༷Ͱ͢ • 47(ͷUFYUཁૉ͸)5.-ͷEJWཁૉΈ͍ͨʹ ࣗಈͰจࣈྻΛંΓฦͯ͘͠Εͳ͍ • UFYU"SFBཁૉ • ࣗಈંΓฦ͠ʹରԠͨ͠UFYUཁૉ
• ·ͩͲͷϒϥ΢β΋ରԠ͍ͯ͠ͳ͍

ରࡦUTQBOཁૉΛ࢖͏ <svg witdh=100 height=100> <text>͜Ε͸ંΓฦ͞ΕͨςΩετͰ͢ɻϥʔϝϯ͕৯΂͍ͨɻ</text> </svg> <svg witdh=100 height=100> <text>
<tspan>͜Ε͸ંΓฦ͞ΕͨςΩετͰ͢ɻ</tspan> <tspan>ϥʔϝϯ͕৯΂͍ͨɻ</tspan> </text> </svg> จࣈྻΛෳ਺ͷཁૉʹ෼ׂ

ৄ͍͠खॱ จࣈྻΛ୯ޠ୯Ґʹ෼ׂ ࢦఆ͞Εͨ෯Λ௒͑Δ·Ͱ ̍୯ޠͣͭUTQBOཁૉʹ௥Ճ ௒͑ͨΒ຤ඌͷ୯ޠΛ࡟আͯ͠ UTQBOཁૉͷҐஔΛௐ੔ ̎ʹ໭Δ

෯Λ௒͔͑ͨͲ͏͔ͷ൑ఆ for (var i = 0; i < words.length; i++)
{ tspanEl.textContent += word if (tspanEl.getComputedTextLength() > width) { // ௒͑ͨ } else { // ௒͑ͯͳ͍ } } HFU$PNQVUFE5FYU-FOHUI Ͱ෯Λऔಘ

݁Ռ͜͏ͳΔ <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>

΍Γ͔ͨͬͨ͜ͱʢʣ ԑऔΓจࣈΛදࣔ͢Δ

ԑऔΓจࣈ ϥʔϝϯ͕৯΂͍ͨ ϥʔϝϯ͕৯΂͍ͨ

ൃੜͨ͠τϥϒϧ ԑऔΓจࣈΛ؆୯ʹ දࣔͰ͖ͳ͍

ݪҼௐࠪ • textཁૉʹԑऔΓΛ௥Ճ͢Δ ศརͳϓϩύςΟ͕ଘࡏ͠ͳ͍

ํ๏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Ͱ͸ԑ͕දࣔ͞Εͳ͍

ํ๏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ཁૉ͕̎ͭ͋Δͷ͕ จॻͷҙຯతʹ͓͔͍͠

• 47('JMUFS • 47(ը૾ʹ༷ʑͳޮՌΛద༻͢Δػೳ • υϩοϓγϟυ΢ɺ৭ͷม׵ͳͲ • ·ͩࢼ͍ͯ͠ͳ͍ͷͰ࣮ݱͰ͖Δ͔ෆ໌ ํ๏47('JMUFSΛ࢖͏

΍Γ͔ͨͬͨ͜ͱʢ̑ʣ ζʔϜ࣌ʹจࣈαΠζΛ ݻఆ͢Δ

ζʔϜͷ࢓૊Έ <svg witdh=100 height=100> <g transform=”scale(ഒ཰)”> <circle /> <circle />
<circle /> <text /> <text /> </g> </svg> શମΛғΉgཁૉͷtransformଐੑΛૢ࡞͢Δ

ζʔϜ

ൃੜͨ͠τϥϒϧ ζʔϜ࣌ʹจࣈαΠζ͕ มԽͯ͠͠·͏

ςΩετ ςΩετ ςΩετ ςΩετ 0, /( /(

ݪҼௐࠪ • 47(ͷ࢓༷Ͱ͢

ରࡦจࣈαΠζΛಈతʹมߋ $elm.on(‘mousewheel’, function() { // ུ var scale = ݱࡏͷഒ཰
var originalFontSize = 24; var currentFontSize = originalFontSize / scale; // ུ (textཁૉͷfontαΠζมߋॲཧ) } ໰୊఺ɿtextཁૉͷ਺͕ଟ͍ͱॲཧ͕ॏͨ͘ͳΔ

ରࡦจࣈαΠζมߋΛ஗Ԇ 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); } Ϛ΢εϗΠʔϧΠϕϯτ͕࿈ଓͯ͠ൃੜ͍ͯ͠Δͱ͖͸ จࣈαΠζΛมߋ͠ͳ͍

ֶΜͩ͜ͱ

47(5FYUʹ͸ τϥϒϧ͕͍ͬͺ͍

˔47(ͷ࢓༷Ͱ͸ʢγϯϓϧʹʣ࣮ݱͰ͖ ͳ͍දݱ͕͋Δ ˔ϒϥ΢βؒͷࠩҟ͕ଘࡏ͢Δ

˔47(Ͱʢγϯϓϧʣʹ࣮ݱͰ͖ͳ͍͜ͱ ͸͠ͳ͍ ˔ϒϥ΢βؒͷࠩҟΛڐ༰͢Δ

ͦ͏͠ͳ͍ͱʜ • ίʔυ͕ඞཁҎ্ʹෳࡶʹͳΔ • ύϑΥʔϚϯε௿ԼɾόάൃੜͷݪҼʹ

ͦΜͳ*OMJOF47(͸ ࢖ָ͍͍ٕͬͯͯ͠ज़

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

͓͠·͍

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

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

More Decks by kadoppe

Other Decks in Technology

Featured

Transcript