Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Inline SVG - トラブルとその対策
Search
kadoppe
October 12, 2013
Technology
0
170
Inline SVG - トラブルとその対策
2013/10/12に大阪で開催された「第8回 HTML5など勉強会」で使用したプレゼンテーション資料です。
kadoppe
October 12, 2013
Tweet
Share
More Decks by kadoppe
See All by kadoppe
一年間スタートアップのCTOをやってきて学んだこと
kadoppe
1
740
未知の顧客にとっても価値あるプロダクトを生み出す
kadoppe
2
1.8k
プレイド開発チームにおけるチーム・ジャーニー ver.202010
kadoppe
4
960
不確実性の高い世界のなかで、非連続な成長を生み出す / Developers Summit 2020 Summer
kadoppe
1
1.9k
プレイド開発チームにおけるチーム・ジャーニー
kadoppe
12
5.8k
プレイドのエンジニアからみた「正しいものを正しくつくる」
kadoppe
0
2.1k
フラット型組織におけるエンジニアリングマネジメント
kadoppe
1
1.3k
Pebble + JavaScriptでつくるスマートウォッチ
kadoppe
0
200
Firefox OSでSVGをつかってみた
kadoppe
0
100
Other Decks in Technology
See All in Technology
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
300
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
バクラクにおける可観測性向上の取り組み
yuu26
3
410
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
450
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.7k
初心者に Vue.js を 教えるには
tsukuha
5
390
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
270
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
APIテスト自動化の勘所
yokawasa
7
4.1k
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
460
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.2k
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
510
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
132
8.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
A Philosophy of Restraint
colly
203
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Agile that works and the tools we love
rasmusluckow
327
21k
Writing Fast Ruby
sferik
626
61k
Embracing the Ebb and Flow
colly
84
4.4k
Code Review Best Practice
trishagee
64
17k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Why Our Code Smells
bkeepers
PRO
334
57k
Happy Clients
brianwarren
97
6.7k
Transcript
*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(
ར༻͢Δٕज़ͷબࢶ • '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( ָ͍͍ٕͬͯͯ͠ज़
ΈΜͳͬͱ ͬͯใަ͠Α͏
͓͠·͍