传智博客
快捷导航
蚂蚁部落
蚂蚁部落 网站首页 前端教程 SVG教程 查看内容

栏目导航

SVG transform用法详解

2017-7-27 23:29| 发布者: admin| 查看: 1268| 评论: 0|来自: 蚂蚁部落

传智播客

建议在阅读本章章节之后,再阅读SVG transform坐标变化深入理解一章节加深理解。

一.css3的transform属性和SVG元素的transform属性:

使用SVG元素的transform属性可以实现变换效果,看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border:1px solid red
}
</style>
</head>
<body>
<svg>
  <rect x="20" y="20"
        width="100"
        height="100"
        fill="blue"
        transform="rotate(10)"
        />
</svg>                        
</body>
</html>

很明显,蓝色的举行块选旋转了一定的角度;大家知道css3也具有transform属性,那么使用这个属性能不能实现SVG元素的变换功能呢。

代码实例如下:

[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;
}
#ant {
  transform:rotate(10deg)
}
</style>
</head>
<body>
<svg>
  <rect id="ant"
         x="60" y="60"
        width="100"
        height="100"
        fill="blue"/>
  <rect
        x="60" y="60"
        width="120"
        height="120"
        fill="red"
        fill-opacity="0.3"
        transform="rotate(10)" />
</svg>                       
</body>
</html>

从上面的代码可以看出,使用css3的transform属性也可以实现,但是在IE浏览器不支持CSS3对SVG元素进行变换操作(包括edge浏览器)。

巨大的差别:

css3的transform属性对普通HTML元素进行变换的时候,坐标原点(0,0)是元素的中心;css3的transform和SVG元素的transform属性对SVG元素进行变换的时候,原点就是当前所在用户坐标系的原点,而不是元素的中心。代码实例如下:

[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;
}
#ant {
  transform:rotate(25deg)
}
div {
  position:absolute;
  left:160px;
  top:160px;
  width:100px;
  height:100px;
  background-color:red;
  opacity:0.3;
  transform:rotate(25deg)
}
</style>
</head>
<body>
<svg>
  <rect id="ant"
         x="60" y="60"
        width="100"
        height="100"
        fill="blue"/>
</svg>
<div></div>                         
</body>
</html>

图形旋转之后就出现了明显的差距,这是因为div是以自身中心为原点进行旋转,而svg元素则是围绕它所在的当前用户坐标系原点进行旋转。到此,我们介绍了css3的变换和SVG元素本身自带的变换属性的一些关联和区别,下面就具体介绍一下相关的SVG图形变换,里面也会涉及到两者的一些区别。

二.translate位移:

[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;
}
div {
  position:absolute;
  left:160px;
  top:160px;
  width:120px;
  height:120px;
  background-color:red;
  opacity:0.3;
  transform:translate(50px,50px)
}
</style>
</head>
<body>
<svg>
  <rect id="ant"
         x="60" y="60"
        width="100"
        height="100"
        transform="translate(50,50)"
        fill="blue"/>
</svg>
<div></div>                         
</body>
</html>

对div和svg矩形在垂直和水平方向都移动了50px,最终坐标是重合了,但是两者还是有一点点差别,但是实质都是一样。

看如下图示:

2.png

(1).区别是两个元素的坐标原点是不同,一个是在元素中心,一个是当前用户坐标系原点(默认左上角)。

(2).实质是相同的,每一次变化都会创建一个新的坐标系,其实是对这个新坐标系在原来坐标系基础上的位移。还有一些小的区别:

css3的transform属性可以使用如下形式:

[CSS] 纯文本查看 复制代码
translateX(tx)
translateY(ty)
translate(tx[, ty])
translateZ(tz)

但是SVG元素的transform属性只支持如下形式:

[XML] 纯文本查看 复制代码
translate(tx[ ty])

并且SVG元素的transform属性是不能够带单位的;多个参数的话,即可使用空格分隔也可以使用逗号分隔。

和CSS3的transform属性相同,SVG元素translate位移也支持多声明累加:

[XML] 纯文本查看 复制代码
transform="translate(10 20) translate(5 10)"

等同于如下:

[XML] 纯文本查看 复制代码
transform="translate(15 30)"

三.rotate旋转:

旋转其实在文章的开头部分已经有所涉及,看图示如下:

3.png

特别说明:用红线标识的是旋转之前坐标系的x轴和y轴。

(1).左侧是对普通HTML元素的旋转,元素的中心就是坐标系的原点(0,0)。

(2).右侧是对SVG元素的旋转,围绕的是所在的当前用户坐标的原点。

再强调一遍:每一次变换,都会创建一个新的坐标系。

css3的rotate旋转可以有如下形式:

[CSS] 纯文本查看 复制代码
rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)

angle必须要有单位,例如deg(度), turn(圈), grad,也可以使用calc()计算。

但是SVG元素的rotate只有一种形式:

[XML] 纯文本查看 复制代码
rotate(angle[ x y])

并且角度不能带有单位;除去角度之外,还有一个可选的参数,它用来规定旋转围绕的坐标(它纯粹规定旋转围绕的中心点,并没有对当前坐标系的原点有任何改变)。代码实例如下:

[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="rotate(45 110 110)"
        fill="blue"/>
  <rect id="ant"
        x="60" y="60"
        width="100"
        height="100"
        fill-opacity="0.5"
        fill="red" />
</svg>
<div></div>                         
</body>
</html>

通过roate()的第二个参数将旋转中心移动到了元素的中心点。

上面也已经提到过了,第二个参数纯粹规定旋转围绕的中心点,并没有对当前坐标系的原点有任何改变,所以后面追加的旋转不能共享这个旋转中心,看如下代码:

[XML] 纯文本查看 复制代码
transform="rotate(45 110 110) rotate(-45)"

第一个旋转围绕是坐标(110,110),但是第二个旋转是围绕的当前元素所在的坐标系原点。

四.scale缩放:

css3的scale缩放具有以下语法形式:

[CSS] 纯文本查看 复制代码
scale3d(x,y,z)
scaleX(x)
scaleY(y)
rotateZ(z)

SVG元素的scale支持如下形式:

[XML] 纯文本查看 复制代码
scale(sx[, sy])

如果第二个参数省略,那么y轴缩放与x轴缩放相同。

图示如下:

4.png

有没有发现,不但元素的尺寸产生了缩放,而且坐标也产生了缩放。

这非常的好解释,因为每次变换都会产生一个新的坐标系,这个新坐标系整个进行了缩放。

五.skew斜切:

如果仅看一个方向的斜切,就如同将一个矩形在一个方向上进行拉伸(总面积不变),以x轴斜切为例子:

6.jpg

在前面的变换中,都是支持scale(sx[, sy])类似语法形式,但是skew却反其道而行之,只能够分开写:

[XML] 纯文本查看 复制代码
skewX()
skewY()

说明:每一次变换都会创建一个新的坐标系,变换是对整个坐标系的变换,所以导致视觉上元素发生了变换。

图示如下:

7.png

图片是css3对普通元素的斜切和svg元素自身属性斜切的差别,这也是由于坐标系原点的不同导致的。

skewX(α1) skewX(α2)和skewX(α1 + α2)最终变换效果不同,因为斜切角度和元素偏移大小非简单的线性变化。

特别说明:本文基本翻译于https://css-tricks.com/transforms-on-svg-elements/,但是经过了自己总结。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 01:21 , Processed in 0.070145 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部