SVG <style>用法及代碼示例

SVG代表可縮放矢量圖形。它可以像HTML畫布一樣用於製作圖形和動畫。

SVG <style>元素允許將樣式表直接嵌入SVG內容中。

用法:

<style>
    Styling Content
</style>

屬性：

type:要使用的樣式表的類型。
media:此屬性定義樣式應用的媒體。
title:此屬性表示樣式表的標題，可用於在備用樣式表之間切換。
Global Attributes:使用了一些全局屬性，例如核心屬性和樣式屬性等。

範例1：

<!DOCTYPE html> 
<html> 
<body> 
    <svg viewBox="0 0 20 20" 
         xmlns="http://www.w3.org/2000/svg"> 
        <style> 
            circle { 
              fill:green; 
            } 
        </style> 
        <circle cx="5" cy="5" r="4" /> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"> 
        <style> 
            rect { 
              fill:green; 
              stroke:black; 
              stroke-width:.1px; 
            } 
        </style> 
        <rect height="5" width='5'/> 
    </svg> 
</body> 
  
</html>

輸出：

支持的瀏覽器：此SVG元素支持以下瀏覽器：

Chrome
Edge
Firefox
Safari
IE瀏覽器
Opera

相關用法

注：本文由純淨天空篩選整理自taran910大神的英文原創作品 SVG <style> Element。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。