Zi 字媒體

此篇文章瀏覽量： 83 先複習一下，svg 如何可以被載入，一種是 inline svg，另一種是 object/embed/iframe，最後一種是 img，可以參考 [SVG] 10. svg 格式如何放入網頁之中。並不是用哪一種方式載入都可以與 css 和 js 運作，來比較一下差異。 svg 與 css、js 互相運作 必需是以下兩種形式載入： SVG is inlined in the HTML.(也就是直接在 HTML 中寫 SVG。) 透過 object/embed/iframe 方式載入。 如果 svg 是透過 img 來載入，或者是透過 css 的 background 相關屬性來載入，那麼 css 和 js 是不能與 svg 互動的。 這裡整理了一張圖： svg 如何與 css 和 js 互動。圖片來源 由此可看出， inline SVG 是支援度最高的。然而，如果不需要任何的互動效果，那麼透過 img、object/embed/iframe 方式載入，其實是最方便的，而且也容易在不同頁面之中重覆使用。 在 SVG 中直接撰寫 CSS 使用 CDATA 的方式： SVG 檔案，也可以透過載入外部 CSS 的方式，如下： 在 SVG 中直接撰寫 JavaScript 透過 onLoad 事件，也就是在標籤載入完成之後才執行： { //... }, false) ]]> 或者也可以寫在 svg 的尾部，就不必使用 onLoad 事件： 若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。 Tweet