写文章

SVG transform用法详解

快乐打工仔 分类：实例代码

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

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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元素的变换功能呢。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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元素进行变换的时候，原点是当前所在用户坐标系的原点，而不是元素的中心。代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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位移:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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，最终坐标是重合的，但两者是有一点差别。

看如下图示:

前端教程

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

（2）.实质是相同的，每一次变换都会创建一个新的坐标系，实质是对这个新坐标系在原来坐标系基础上的位移。

其他区别:

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

translateX(tx)
translateY(ty)
translate(tx[, ty])
translateZ(tz)

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

translate(tx[ ty])

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

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

transform="translate(10 20) translate(5 10)"

等同于如下:

transform="translate(15 30)"

三.rotate旋转:

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

前端教程

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

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

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

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

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

rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)

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

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

rotate(angle[ x y])

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()的第二个参数将旋转中心移动到了元素的中心点。

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

transform="rotate(45 110 110) rotate(-45)"

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

四.scale缩放:

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

scale3d(x,y,z)
scaleX(x)
scaleY(y)
rotateZ(z)

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

scale(sx[, sy])

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

图示如下:

前端教程

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

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

五.skew斜切:

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

前端教程

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

skewX()
skewY()

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

图示如下:

前端教程

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

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

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

SVG transform用法详解，这样的场景在实际项目中还是用的比较多的，关于SVG transform用法详解就介绍到这了。

SVG transform用法详解属于前端实例代码，有关更多实例代码大家可以查看。

回复

我来回复

  • 暂无回复内容