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
180
Inline SVG - トラブルとその対策
2013/10/12に大阪で開催された「第8回 HTML5など勉強会」で使用したプレゼンテーション資料です。
kadoppe
October 12, 2013
Tweet
Share
More Decks by kadoppe
See All by kadoppe
一年間スタートアップのCTOをやってきて学んだこと
kadoppe
1
920
未知の顧客にとっても価値あるプロダクトを生み出す
kadoppe
2
1.9k
プレイド開発チームにおけるチーム・ジャーニー ver.202010
kadoppe
4
1k
不確実性の高い世界のなかで、非連続な成長を生み出す / Developers Summit 2020 Summer
kadoppe
1
2k
プレイド開発チームにおけるチーム・ジャーニー
kadoppe
12
7.3k
プレイドのエンジニアからみた「正しいものを正しくつくる」
kadoppe
0
2.2k
フラット型組織におけるエンジニアリングマネジメント
kadoppe
1
1.4k
Pebble + JavaScriptでつくるスマートウォッチ
kadoppe
0
230
Firefox OSでSVGをつかってみた
kadoppe
0
140
Other Decks in Technology
See All in Technology
サンドボックス技術でAI利活用を促進する
koh_naga
0
190
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
250
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
620
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
210
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3k
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
350
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
400
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
150
Codeful Serverless / 一人運用でもやり抜く力
_kensh
6
330
Kubernetes における cgroup driver のしくみ: runwasi の bugfix より
z63d
2
240
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
8
1.9k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
BBQ
matthewcrist
89
9.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Fireside Chat
paigeccino
39
3.6k
Scaling GitHub
holman
463
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
For a Future-Friendly Web
brad_frost
180
9.9k
Become a Pro
speakerdeck
PRO
29
5.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( ָ͍͍ٕͬͯͯ͠ज़
ΈΜͳͬͱ ͬͯใަ͠Α͏
͓͠·͍