[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>
  <style>
    <![CDATA[
      #my-rect { fill: blue; }
    ]]>
  </style>
  <rect id="my-rect" x="0" y="0" width="10" height="10" />
</svg>

SVG 檔案,也可以透過載入外部 CSS 的方式,如下:

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<svg>
  <rect id="my-rect" x="0" y="0" width="10" height="10" />
</svg>

在 SVG 中直接撰寫 JavaScript

透過 onLoad 事件,也就是在標籤載入完成之後才執行:

<svg>
  <script>
    <![CDATA[
      window.addEventListener("load", () => {
        //...
      }, false)
    ]]>
  </script>
  <rect x="0" y="0" width="10" height="10" fill="blue" />
</svg>

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

<svg>
  <rect x="0" y="0" width="10" height="10" fill="blue" />
  <script>
    <![CDATA[
      //...
    ]]>
  </script>
</svg>

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of