SVG破損事例の解説

 SVG破損事例の解説

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

2377be1c3f33751ea7c73a7bd8d58996?s=128

T. MOTOOKA

June 01, 2019
Tweet

Transcript

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

  2. "CPVUUIF4QFBLFS w 5.0500,"!U@NPUPPLB w ٕज़ॻయ̑
 ʮςΩετΤσΟλͱϒϥ΢βͰॻ͚Δɾඳ͚Δ47(ʯ w ٕज़ॻయ̒
 ʮྩ࿨ͷ࣌୅ͷ1PTU4DSJQUೖ໳ʯ w

    খن໛اۀ޲͚ͷ$3.ͱ͔Λ࡞Δਓ
 ʢ1)1 +BWB FUDʣ w ΩʔϘʔυ͸ʮತܕΧʔιϧΩʔʯͷ+*4഑ྻ೿
  3. ໨࣍ w ഁଛ͢Δࣄྫ w Ͳ͏΍ͬͯݟ͚ͭͨͷ͔ʁ w τϥϒϧ͔Βԕ͔͟ΔͨΊʹ

  4. ഁଛ͢Δࣄྫ

  5. ഁଛ͢Δࣄྫ w 4BGBSJʢࠓ೥݄Լ०ϦϦʔεʣ·ͨ͸ͦΕҎ߱ w +BWB4DSJQUͰ47(ͷ<image>ཁૉͷಛఆͷૢ࡞Ͱ w xlink:hrefଐੑ͕ফ͑Δ w ͚ͩͲը૾ͷදࣔ͸͞Ε͍ͯΔ w

    %0.USFF಺༰Λอଘͯ͠࠶౓ಡ·ͤΔͱը૾ݟ͑ͣ
  6. ഁଛ͢Δࣄྫ σϞ

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

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

  9. ೋ෼୳ࡧ w BLBόΠφϦʔαʔν w ιʔτࡁΈͷ഑ྻͷத͔Β໨తͷσʔλΛ୳͢ํ๏ w    

      ͱ͍͏ɺঢॱʹͳ͍ͬͯΔ਺ྻ w ճͷૢ࡞Ͱ߲໨͔͠ݟΕͳ͍ͱ͖ʹɺͲ͏୳͢ʁ w Ԡ༻ྫɿ೥ྸೋ෼୳ࡧ ࿩͸มΘͬͯʜ
  10. खಈೋ෼୳ࡧ w ೋ෼୳ࡧͷԠ༻ͰόάݪҼΛ୳͢ w όάΛ౿ΉݪҼ͕ߦͷίʔυͰ͋Δͱ͍͏Ծઆ
 ʢ͚ͬ͜͏ࡶʣ w Ծઆ͕ຬͨ͞Εͳͯ͘΋ɺॿ͚ʹ͸ͳΔ w ໨తͷίʔυ͚ͩίϝϯτΞ΢τ͢Ε͹࠶ݱ͠ͳ͍͸ͣ

    w ಈ͍͍ͯΔίʔυΛ൒෼͚ͩίϝϯτΞ΢τͯ͠ʜͷ܁Γ ฦ͠ͰݪҼՕॴΛݟ͚ͭग़͢
  11. ݪҼΛͲ͏΍ͬͯݟ͚ͭͨʁ खಈೋ෼୳ࡧͷ݁ՌɺݪҼ͸ TransformListૢ࡞ͱ element.removeAttribute('style') ͷ૊Έ߹Θͤͩͱ൑໌ ͦͷޙɺόάใࠂ͠·͕ͨ͠ɺݱ࣌఺Ͱ͸์ஔʜ

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

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

    8FCϒϥ΢β։ൃऀͨͪͷςεταΠτͷ஥ؒೖΓ
 ʢ༗໊ͳαΠτʹͳΖ͏ʣ
  14. ·ͱΊ w 47(ը૾΋յΕΔ͜ͱ͕͋Δ w ϒϥ΢βͷόάΛ౿Ή͜ͱ͕͋Δ w ೋ෼୳ࡧ͸ࢲͨͪΛॿ͚ͯ͘ΕΔ w 8FCϒϥ΢βͷόʔδϣϯΞοϓʹ͸஫ҙ w

    47(ͷϚΠφʔͳػೳΛ࢖͏ͱ͖͸஫ҙ
  15. ׬