SVG破損事例の解説

ブラウザのバグを踏んでSVG画像が壊れてしまう事例を一つ紹介しています。

Transcript

1. 47(ը૾
   ഁଛࣄྫͷղઆ
   CZ5.0500,"
   'SPOUFOE/BHPZB
   IUUQTGSPOUFOEEPPSLFFQFSKQFWFOUT
   

   View Slide

2. "CPVUUIF4QFBLFS
   w 5.0500,"!U@NPUPPLB
   w ٕज़ॻయ̑

   ʮςΩετΤσΟλͱϒϥ΢βͰॻ͚Δɾඳ͚Δ47(ʯ
   w ٕज़ॻయ̒

   ʮྩ࿨ͷ࣌୅ͷ1PTU4DSJQUೖ໳ʯ
   w খن໛اۀ޲͚ͷ$3.ͱ͔Λ࡞Δਓ

   ʢ1)1 +BWB FUDʣ
   w ΩʔϘʔυ͸ʮತܕΧʔιϧΩʔʯͷ+*4഑ྻ೿
   

   View Slide

3. ໨࣍
   w ഁଛ͢Δࣄྫ
   w Ͳ͏΍ͬͯݟ͚ͭͨͷ͔ʁ
   w τϥϒϧ͔Βԕ͔͟ΔͨΊʹ
   

   View Slide

4. ഁଛ͢Δࣄྫ
   

   View Slide

5. ഁଛ͢Δࣄྫ
   w 4BGBSJʢࠓ೥݄Լ०ϦϦʔεʣ·ͨ͸ͦΕҎ߱
   w +BWB4DSJQUͰ47(ͷཁૉͷಛఆͷૢ࡞Ͱ
   w xlink:hrefଐੑ͕ফ͑Δ
   w ͚ͩͲը૾ͷදࣔ͸͞Ε͍ͯΔ
   w %0.USFF಺༰Λอଘͯ͠࠶౓ಡ·ͤΔͱը૾ݟ͑ͣ
   

   View Slide

6. ഁଛ͢Δࣄྫ
   σϞ
   

   View Slide

7. Ͳ͏΍ͬͯ
   ݟ͚ͭͨͷ͔ʁ
   

   View Slide

8. Ͳ͏΍ͬͯݟ͚ͭͨʁ
   w 47(&EJU

   IUUQTHJUIVCDPN47(&EJUTWHFEJU
   w Λ4BGBSJͰ։ൃऀίϯιʔϧΛݟͳ͕Βૢ࡞͍ͯ͠Δͱɺ
   ը૾͕ফ͑Δ͜ͱ͕͋ͬͨ
   w ݪҼΛ୳Δ΂͘ɺΞϚκϯͷԞ஍΁ͱඈΜͩʜ
   

   View Slide

9. ೋ෼୳ࡧ
   w BLBόΠφϦʔαʔν
   w ιʔτࡁΈͷ഑ྻͷத͔Β໨తͷσʔλΛ୳͢ํ๏
   w ͱ͍͏ɺঢॱʹͳ͍ͬͯΔ਺ྻ
   w ճͷૢ࡞Ͱ߲໨͔͠ݟΕͳ͍ͱ͖ʹɺͲ͏୳͢ʁ
   w Ԡ༻ྫɿ೥ྸೋ෼୳ࡧ
   ࿩͸มΘͬͯʜ
   

   View Slide

10. खಈೋ෼୳ࡧ
    w ೋ෼୳ࡧͷԠ༻ͰόάݪҼΛ୳͢
    w όάΛ౿ΉݪҼ͕ߦͷίʔυͰ͋Δͱ͍͏Ծઆ

    ʢ͚ͬ͜͏ࡶʣ
    w Ծઆ͕ຬͨ͞Εͳͯ͘΋ɺॿ͚ʹ͸ͳΔ
    w ໨తͷίʔυ͚ͩίϝϯτΞ΢τ͢Ε͹࠶ݱ͠ͳ͍͸ͣ
    w ಈ͍͍ͯΔίʔυΛ൒෼͚ͩίϝϯτΞ΢τͯ͠ʜͷ܁Γ
    ฦ͠ͰݪҼՕॴΛݟ͚ͭग़͢
    

    View Slide

11. ݪҼΛͲ͏΍ͬͯݟ͚ͭͨʁ
    खಈೋ෼୳ࡧͷ݁ՌɺݪҼ͸
    TransformListૢ࡞ͱ
    element.removeAttribute('style')
    ͷ૊Έ߹Θͤͩͱ൑໌
    ͦͷޙɺόάใࠂ͠·͕ͨ͠ɺݱ࣌఺Ͱ͸์ஔʜ
    

    View Slide

12. τϥϒϧ͔Β
    ԕ͔͟ΔͨΊʹ
    

    View Slide

13. τϥϒϧ͔Βԕ͔͟ΔͨΊʹ
    w ૣظݕग़ͷͨΊʹ
    w 8FCϒϥ΢βͷόʔδϣϯΞοϓࣗମΛ஌Δ
    w ԕ͔͟ΔͨΊʹ
    w ௒ϚΠφʔͳػೳ͸ා͍
    w 8FCϒϥ΢β։ൃऀͨͪͷςεταΠτͷ஥ؒೖΓ

    ʢ༗໊ͳαΠτʹͳΖ͏ʣ
    

    View Slide

14. ·ͱΊ
    w 47(ը૾΋յΕΔ͜ͱ͕͋Δ
    w ϒϥ΢βͷόάΛ౿Ή͜ͱ͕͋Δ
    w ೋ෼୳ࡧ͸ࢲͨͪΛॿ͚ͯ͘ΕΔ
    w 8FCϒϥ΢βͷόʔδϣϯΞοϓʹ͸஫ҙ
    w 47(ͷϚΠφʔͳػೳΛ࢖͏ͱ͖͸஫ҙ
    

    View Slide

15. ׬
    

    View Slide