[SVG] 11. 如何調整 svg 相關元素的外觀

我們所撰寫的 svg,也可以透過 CSS 去調整外觀,那在語法上該如何做到呢?而且也不是所有的 CSS 樣式都可以使用,svg 有部份有它自己專屬的設定方式。

觀念

在針對 svg 去調整外觀樣式的時候,以下幾個觀念需要留意:

  • 直接寫在標籤的 style 屬性中。
  • 可以寫在 css 樣式表之中
  • 並不是所有的 css 都可以使用,例如要改變 text 元素的顏色的話,要使用 fill 來設定,而不是 color。

範例

請看以下範例,來瞭解該如何為 svg 設定樣式:

See the Pen svg 修改樣式 by CarlosStudio (@carlos411) on CodePen.

您可在此處留言

avatar

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

  Subscribe  
Notify of