腾讯欢乐捕鱼刷金币|腾讯欢乐捕鱼大战技巧
您的位置:首頁> 實例代碼> SVG實例

SVG transform用法詳解

2017-7-27 23:29| 作者: admin| 查看: 14751| 評論: 0|來自: 螞蟻部落

建議在閱讀本章章節之后,再閱讀SVG transform坐標變化深入理解一章節加深理解。

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

使用SVG元素的transform屬性可以實現變換效果,看如下代碼實例:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.ofucs.tw/" />
<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.ofucs.tw/" />
<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.ofucs.tw/" />
<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.ofucs.tw/" />
<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.ofucs.tw/" />
<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/,但是經過了自己總結。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
腾讯欢乐捕鱼刷金币 捕鱼大师现金版 开心棋牌有挂吗 2017牛牛影院 官方吉祥棋牌馆手机版 财神捕鱼官方下载 今天上海快三开奖 北京11选5基本走势图 3d福彩中心在哪里 关于围棋的哲理句子 申城上海麻将app