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
720
未知の顧客にとっても価値あるプロダクトを生み出す
kadoppe
2
1.7k
プレイド開発チームにおけるチーム・ジャーニー ver.202010
kadoppe
4
950
不確実性の高い世界のなかで、非連続な成長を生み出す / Developers Summit 2020 Summer
kadoppe
1
1.8k
プレイド開発チームにおけるチーム・ジャーニー
kadoppe
12
5.7k
プレイドのエンジニアからみた「正しいものを正しくつくる」
kadoppe
0
2k
フラット型組織におけるエンジニアリングマネジメント
kadoppe
1
1.3k
Pebble + JavaScriptでつくるスマートウォッチ
kadoppe
0
200
Firefox OSでSVGをつかってみた
kadoppe
0
100
Other Decks in Technology
See All in Technology
20240912 JJUGナイトセミナー
mii1004
0
140
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
390
watsonx.ai Dojo 環境準備について
oniak3ibm
PRO
0
300
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
940
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
180
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
230
ついに出た!OpenAIの最新モデル「o1」って何がすごいの?
minorun365
PRO
3
1.1k
サプライチェーン攻撃に備える
ryunen344
0
290
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
380
DevRelの始め方
moongift
PRO
1
390
OR学会2024秋_短期収益と将来のオフ方策評価性能を考慮したクーポン割当方策混合比の決定
recruitengineers
PRO
4
460
『GRANBLUE FANTASY Relink』キャラクターの魅力を支えるリグ・シミュレーション制作事例
cygames
0
120
Featured
See All Featured
A Tale of Four Properties
chriscoyier
155
22k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
How GitHub (no longer) Works
holman
310
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Bash Introduction
62gerente
608
210k
Web development in the modern age
philhawksworth
205
10k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
A Philosophy of Restraint
colly
202
16k
Rails Girls Zürich Keynote
gr2m
93
13k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Embracing the Ebb and Flow
colly
83
4.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
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( ָ͍͍ٕͬͯͯ͠ज़
ΈΜͳͬͱ ͬͯใަ͠Α͏
͓͠·͍