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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。