SVG style屬性用法及代碼示例

style屬性可幫助我們使用CSS聲明來設置元素的樣式。它的工作原理與HTML的style屬性非常相似。幾乎所有元素都使用此屬性。

用法:

style = "<style>"

屬性值：style屬性接受上麵提到的和下麵描述的值。

風格：樣式數據的語法取決於所提供的CSS。

以下示例說明了style屬性的用法。

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
    <body> 
          
        <svg viewBox="-10 -5 1220 520" 
             xmlns="http://www.w3.org/2000/svg"> 
            <defs> 
                <marker id="geek"
                    viewBox="0 0 10 10"
                    refX="1" refY="5"
                    markerUnits="strokeWidth"
                    markerWidth="7"
                    markerHeight="7"
                    orient="auto"> 
                   <path d="M 0 0 L 10 5 L 0 10 z" 
                    fill="green"/> 
                </marker> 
            </defs> 
  
            <polyline points="20, 20 40, 25 60, 
                    40 80, 120 120, 140 200, 180" 
                    style="fill:none;stroke:green; 
                    stroke-width:3"  
                    marker-end="url(#geek)"/> 
          </svg> 
    </body>    
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
    <body> 
        <svg viewbox="0 0 150 60" 
          xmlns="http://www.w3.org/2000/svg"> 
          <circle cx="12" cy="12" r="10"
              style="fill:lightgreen;  
              stroke:green;  
              stroke-width:2;"/> 
        </svg> 
    </body> 
     
</html>

輸出：

相關用法

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