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
770
未知の顧客にとっても価値あるプロダクトを生み出す
kadoppe
2
1.8k
プレイド開発チームにおけるチーム・ジャーニー ver.202010
kadoppe
4
980
不確実性の高い世界のなかで、非連続な成長を生み出す / Developers Summit 2020 Summer
kadoppe
1
1.9k
プレイド開発チームにおけるチーム・ジャーニー
kadoppe
12
5.9k
プレイドのエンジニアからみた「正しいものを正しくつくる」
kadoppe
0
2.1k
フラット型組織におけるエンジニアリングマネジメント
kadoppe
1
1.3k
Pebble + JavaScriptでつくるスマートウォッチ
kadoppe
0
200
Firefox OSでSVGをつかってみた
kadoppe
0
110
Other Decks in Technology
See All in Technology
スクラム成熟度セルフチェックツールを作って得た学びとその活用法
coincheck_recruit
1
140
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.3k
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
3
180
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
120
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
380
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
2
580
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
170
SSMRunbook作成の勘所_20241120
koichiotomo
2
120
Lexical Analysis
shigashiyama
1
150
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
Lambdaと地方とコミュニティ
miu_crescent
2
370
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
220
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
A better future with KSS
kneath
238
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Become a Pro
speakerdeck
PRO
25
5k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
How STYLIGHT went responsive
nonsquared
95
5.2k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Statistics for Hackers
jakevdp
796
220k
Six Lessons from altMBA
skipperchong
27
3.5k
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( ָ͍͍ٕͬͯͯ͠ज़
ΈΜͳͬͱ ͬͯใަ͠Α͏
͓͠·͍