SVG transform变换深入理解

2018-8-10 00:10| 作者: admin| 查看: 1929| 评论: 0|来自: 蚂蚁部落

SVG transform用法详解一文对transform变换做详细介绍,也涉及到它变化的实质。

可能由于未着重的强调,会导致一些读者忽略或者不能很好的理解。

本文不对变换细节做介绍,只结合图示分析它的实质。

变换不仅可以使用提供的变换函数,也可以使用matrix矩阵函数,SVG矩阵和canvas矩阵原理一样。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
* {
  margin:0px;
  padding:0px;
}
svg {
  border:1px solid red;
  width:300px;
  height:300px;
  margin:100px;
}
</style>
</head>
<body>
<svg>
  <rect id="ant"
         x="60" y="60"
        width="100"
        height="100"
        transform="matrix(2, 0, 0, 2, 0, 0)"
        fill="blue"/>
</svg>
<div></div>                         
</body>
</html>

采用matrix函数对元素进行缩放;其实translate()、skew、scale()和rotate()内部都是调用的矩阵函数。

transform变换的实质:

对SVG图形元素的变换,表面看是针对元素本身,比如translate位移,好像是将元素从当前坐标系的一个位置移动到另一个位置。然而事实且并非如此,每当对元素应用transform变换,都会在此元素之上创建一个原来用户坐标系的副本,然后对此坐标系进行位移、缩放等操作,于是在视觉上就产生了操作元素本身的效果。

特别说明:所有演示图片均来自于外国技术网站,在这里非常感谢。

变换演示

在初始用户坐标系中,有一个鹦鹉图形,并没有采用任何变换。

简略代码如下:

[XML] 纯文本查看 复制代码
<svg width="800" height="800">
  <g id="parrot">
    <!-- shapes and paths forming the parrot -->
  </g>
</svg>

下面我们先进行位移操作,代码如下:

[XML] 纯文本查看 复制代码
<svg width="800" height="800">
  <g id="parrot" transform="translate(150 200)">
    <!-- shapes and paths forming the parrot -->
  </g>
</svg>

变换后的图示如下:

变换演示

实质是坐标系位置的改变,图示如下:

变换演示

总结如下:

(1).不要以日常生活中物体位移对svg中相关概念的理解。

(2).SVG中元素的变换,实质是坐标系的变换,从而达到视觉上的位移或者形状变化的效果。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部