SVG缩放，移动，倾斜和旋转变换【3】

来源 : 作者 : admin时间 : 2016-02-27 16:01:48 人气指数 :

导语　　SVG元素可以通过缩放，移动，倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而，当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性，包括

　　下面的图片展示了同样角度的情况下使用skewY()而不是skewX倾斜狗的情况：

　　最后，让我们尝试旋转鹦鹉。旋转默认的中心是当前用户坐标系的左上角。新的建立在旋转元素上的当前系统也被旋转了。在下面的例子中，我们将把鹦鹉旋转45度。旋转方向为顺时针。　

<svg width="800" height="800" viewBox="0 0 800 600">

    <g id="parrot" transform="rotate(45)">

        

    </g>

    

</svg>

添加上述变换的结果如下：

　　 svg

　　你很可能想要围绕默认坐标系原点之外的点来旋转一个元素。在transform属性中使用rotate()函数，你可以声明这个点。试想在这个例子中我们想按照它自己的中心旋转这个鹦鹉。根据鹦鹉的宽、高以及位置，我精确计算出它的中心在(150,170)。这个鹦鹉可以围着它的中心旋转。

<svg width="800" height="800" viewBox="0 0 800 600">

    <g id="parrot" transform="rotate(45 150 170)">

        

    </g>

    

</svg>