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