SVG vector-effect屬性用法及代碼示例

vector-effect屬性定義繪製對象時要使用的矢量效果。這些效果將在濾鏡，蒙版和剪輯的合成操作之前應用。它僅對<circle>，<ellipse>，<foreignObject>，<image>，<line>，<path>，<polygon>，<polyline>，<rect>，<text>，<textPath> < tspan>和<use>元素。

注意：此效果也可以用作CSS屬性。

用法:

vector-effect = none | non-scaling-size | non-scaling-stroke 
                          | fixed-position | non-rotation

屬性值：此屬性接受上麵提到並在下麵描述的值：

none:它指定不應用矢量效果。這是屬性的默認值。
非比例行程：它修改了對象的筆觸方式。筆觸寬度不再取決於元素和縮放級別的變換。
非縮放尺寸：它指定元素及其後代使用的用戶坐標係的比例不變。
non-rotation:它指定抑製元素及其後代使用的用戶坐標係的旋轉和傾斜。
fixed-position:它指定元素及其後代使用的用戶坐標係的位置是固定的。

範例1：下麵的示例說明了使用非縮放筆劃屬性值的word-spacing屬性的用法。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; 
            font-size:40px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="120 5 1200 940"> 
        <path vector-effect="non-scaling-size"
            transform="translate(100,0)scale(4,1)" 
            d="M10,20L40,100L39,200z"
            stroke="green" stroke-width="2px" 
            fill="none"> 
        </path> 
  
        <path vector-effect="non-scaling-stroke" 
            transform="translate(300,0)scale(4,1)" 
            d="M10,20L40,100L39,200z"
            stroke="green" stroke-width="2px" 
            fill="none"> 
        </path> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：下麵的示例說明了使用非縮放大小屬性值的word-spacing屬性的用法。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;  
            text-align:center;"> 
        GeeksforGeeks 
    </h1> 
  
    <div class="geeks" style="text-align:center;"> 
  
        <!-- Here we have not applied 
         vector-effect attribute  -->
        <svg width="200" height="200" 
            viewBox="0 0 50 50"> 
              
            <circle cx="25" cy="25" r="20" fill="none" 
                stroke="green" stroke-width="2" /> 
              
            <path d="M25 15 L 25 35" fill="none" 
                    stroke="green" stroke-width="2" 
                    stroke-linecap="round" /> 
              
            <path d="M15 25 L 35 25" fill="none" 
                stroke="green" stroke-width="2" 
                stroke-linecap="round" /> 
        </svg> 
  
        <!-- Here we have applied 
         vector-effect attribute  -->
        <svg width="200" height="200" 
            viewBox="0 0 50 50"> 
              
            <circle cx="25" cy="25" r="20" fill="none" 
                stroke="green" stroke-width="2"
                vector-effect="non-scaling-stroke" /> 
              
            <path d="M25 15 L 25 35" fill="none" 
                stroke="green" stroke-width="2" 
                stroke-linecap="round"
                vector-effect="non-scaling-size" /> 
              
            <path d="M15 25 L 35 25" fill="none" 
                stroke="green" stroke-width="2" 
                stroke-linecap="round"
                vector-effect="non-scaling-stroke" /> 
        </svg> 
    </div> 
</body> 
  
</html>

輸出：

相關用法

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