SVG type屬性用法及代碼示例

type屬性是非特定屬性，根據其使用的上下文，其含義有所不同。

它為<animateTransform>元素定義轉換的類型，該元素的值隨時間變化。
它為<feColorMatrix>元素定義矩陣運算的類型。
它為<feFuncG>，<feFuncB>，<feFuncR>和<feFuncA>元素定義了組件傳遞函數的類型。
它為<feTurbulence>元素定義了濾鏡基元應執行湍流還是噪聲函數。
它為<style>和<script>元素定義元素的內容類型。

用法:

type = "value"

屬性值：type屬性可以與以下元素一起使用：

<animateTransform>：該元素包括類型屬性，其值包括平移，縮放，旋轉，skewX，skewY。
<feColorMatrix>：該元素包括類型屬性，其值具有矩陣，飽和度，hueRotate，亮度ToAlpha之類的值。
<動蕩>：該元素包括類型屬性，其值具有fractalNoise，turbulence之類的值。
<feFuncR>，<feFuncG>，<feFuncB>和<feFuncA>：這些元素包括類型屬性，其值具有標識，表，離散，線性，伽瑪值。

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

範例1：

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg width="320" height="320" 
        viewBox="20 30 120 120" 
        xmlns="http://www.w3.org/2000/svg"> 
  
        <polygon points="60, 30 90, 90 30, 90" fill="green"> 
  
            <animateTransform attributeName="transform" 
                attributeType="XML" type="rotate" 
                from="0 60 70" to="360 60 70"
                dur="5s" repeatCount="indefinite" /> 
        </polygon> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color:green;  
             margin-left:50px;"> 
  
        <h1>GeeksforGeeks</h1> 
  
        <svg viewBox="0 0 480 100" 
            xmlns="http://www.w3.org/2000/svg"> 
  
            <filter id="geek2" x="-20%" y="-20%" 
                width="150%" height="150%"> 
                  
                <feTurbulence type="turbulence" 
                    baseFrequency="0.05" numOctaves="5"
                    result="turbulence" /> 
                  
                <feDisplacementMap in2="turbulence" 
                    in="SourceGraphic" scale="20" /> 
            </filter> 
  
            <polygon points="50, 9 60.5, 39.5 92.7,  
                40.1 67, 59.5 76.4, 90.3 50, 71.9  
                23.6, 90.3 32.9, 59.5 7.2, 40.1 39.4,  
                39.5" style="filter:url(#geek2);"
                fill="hsl(106, 80%, 50%)" /> 
        </svg> 
    </div> 
</body> 
  
</html>

輸出：

相關用法

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