SVG transform屬性用法及代碼示例

transform屬性聲明應用於元素及其子元素的變換定義列表。在SVG 1.1中，僅允許這些元素使用轉換屬性<a>，<circle>，<clipPath>，<defs>，<ellipse>，<foreignObject>，<g>，<image>，<line>，< path>，<polygon>，<polyline>，<rect>，<switch>，<text>和<use>。

用法:

transform = scale() | translate() | rotate() | 
                 matrix() | skewX() | skewY()

屬性值：變換屬性接受上麵提到的和下麵描述的變換函數。

skewX()：它枚舉了沿x軸傾斜度的度數。
skewY()：它枚舉了沿y軸傾斜度的度數。
scale()：它用x和y枚舉比例運算。如果未提供y，則假定等於x。
rotate()：枚舉圍繞給定點的旋轉角度。
translate()：它將對象移動x和y。如果未提供y，則假定為0。
matrix()：它枚舉了六個值的轉換矩陣形式的轉換。

範例1：下麵的示例說明了如何使用rotate()，translate()，skewX()和scale()轉換函數來使用轉換屬性。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; font-size:50px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="-25 0 450 400" 
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"> 
          
        <g fill="grey" transform="rotate(-10 50 100) 
                        translate(-36 45.5) 
                        skewX(40) 
                        scale(1 0.5)"> 
            <path id="heart" d="M 10, 30 A 20, 20  
                            0, 0, 1 50, 30 A 20,  
                            20 0, 0, 1 90, 30 Q 90, 
                            60 50, 90 Q 10, 60 10,  
                            30 z" /> 
        </g> 
          
        <use xlink:href="#heart" f 
            ill="none" stroke="green" /> 
    </svg> 
  
</body> 
  
</html>

輸出：

範例2：下麵的示例說明了使用比例轉換函數使用轉換屬性的示例。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; font-size:50px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="-60 -40 400 400" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <circle cx="0" cy="0" r="10" 
            fill="green" transform="scale(4)" /> 
  
        <circle cx="0" cy="0" r="10" 
            fill="yellow" transform="scale(1, 4)" /> 
  
        <circle cx="0" cy="0" r="10" 
            fill="lightgreen" transform="scale(4, 1)" /> 
  
        <circle cx="0" cy="0" r="10" fill="green" /> 
    </svg> 
</body> 
  
</html>

輸出：

相關用法

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