$30 off During Our Annual Pro Sale. View Details »

SVG破損事例の解説

 SVG破損事例の解説

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

T. MOTOOKA

June 01, 2019
Tweet

More Decks by T. MOTOOKA

Other Decks in Technology

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