SVG transform用法详解

2017-7-27 23:29| 发布者: admin| 查看: 3028| 评论: 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浏览器和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,最终坐标是重合的,但两者是有一点差别。

看如下图示:

1485876084300930.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旋转:

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

1485876229519465.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轴缩放相同。

图示如下:

1485876426760750.png

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

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

五.skew斜切:

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

1485876465394162.jpg

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

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

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

图示如下:

1485876515644387.png

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

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

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部