[SVG] 12. svg 如何與 css 和 js 互相運作

先複習一下，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 事件，也就是在標籤載入完成之後才執行：

或者也可以寫在 svg 的尾部，就不必使用 onLoad 事件：