您的位置:首頁> 實例代碼> SVG實例

SVG transform用法詳解

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

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

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

SHIYONGSVGYUANSUDEtransformSHUXINGKEYISHIXIANBIANHUANXIAOGUO,KANRUXIADAIMASHILI:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://glbcf.cn/" />
<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>

JUXINGXUANXUANZHUANYIDINGDEJIAODU;css3YEJUYOUtransformSHUXING,NEIMECISHUXINGNENGBUNENGSHIXIANSVGYUANSUDEBIANHUANGONGNENGNI。

DAIMASHILIRUXIA:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://glbcf.cn/" />
<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>

秒速赛车打不开css3DEtransformSHUXINGYEKESHIXIAN,DANIELIULANQIHEedgeLIULANQIBUZHICHI。

巨大的差別:

css3的transform屬性對普通HTML元素進行變換的時候,坐標原點(0,0)默認是元素的中心;css3的transform和SVG元素的transform屬性對SVG元素進行變換的時候,原點是當前所在用戶坐標系秒速赛车打不开的原點,而不是元素的中心。代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://glbcf.cn/" />
<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>

秒速赛车打不开XUANZHUANZHIHOUCHUXIANMINGXIANDECHAYI,YINWEIdivYIZISHENZHONGXINWEIYUANDIANXUANZHUAN,ERsvgYUANSUSHIWEIRAOTASUOZAIDEDANGQIANYONGHUZUOBIAOXIYUANDIANXUANZHUAN。ZHICI,JIESHAOLEcss3DEBIANHUANHESVGYUANSUZIDAIBIANHUANSHUXINGDEYIXIEGUANLIANHEQUBIE,XIAMIANJUTIJIESHAOYIXIASVGTUXINGBIANHUANZHISHI。

二.translate位移:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://glbcf.cn/" />
<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>

秒速赛车打不开divHEsvgZAICHUIZHIHESHUIPINGFANGXIANGDOUYIDONG50px,ZUIZHONGZUOBIAOSHIZHONGHEDE,DANLIANGZHESHIYOUYIDIANCHABIE。

KANRUXIATUSHI:

1485876084300930.png

(1).QUBIESHI,LIANGYUANSUDEZUOBIAOYUANDIANSHIBUTONG,YIGEZAIYUANSUZHONGXIN,YIGEZAIYONGHUZUOBIAOXIYUANDIAN(MORENZUOSHANGJIAO)。

(2).SHIZHISHIXIANGTONGDE,MEIYICIBIANHUANDOUHUICHUANGJIANYIGEXINDEZUOBIAOXI,SHIZHISHIDUIZHEGEXINZUOBIAOXIZAIYUANLAIZUOBIAOXIJICHUSHANGDEWEIYI。

QITAQUBIE:

秒速赛车打不开css3DEtransformSHUXINGKEYISHIYONGRUXIAXINGSHI:

[CSS] 純文本查看 復制代碼
translateX(tx)
translateY(ty)
translate(tx[, ty])
translateZ(tz)

秒速赛车打不开DANSHISVGYUANSUDEtransformSHUXINGZHIZHICHIRUXIAXINGSHI:

[XML] 純文本查看 復制代碼
translate(tx[ ty])

秒速赛车打不开BINGQIESVGYUANSUDEtransformSHUXINGSHIBUNENGGOUDAIDANWEIDE;DUOGECANSHUDEHUA,JIKESHIYONGKONGGEFENGEYEKEYISHIYONGDOUHAOFENGE。

YUCSS3DEtransformSHUXINGXIANGTONG,SVGYUANSUtranslateWEIYIYEZHICHIDUOSHENGMINGLEIJIA:

[XML] 純文本查看 復制代碼
transform="translate(10 20) translate(5 10)"

DENGTONGYURUXIA:

[XML] 純文本查看 復制代碼
transform="translate(15 30)"

三.rotate旋轉:

秒速赛车打不开XUANZHUANZAIWENZHANGDEKAITOUBUFENYIJINGYOUSUOSHEJI,KANTUSHIRUXIA:

1485876229519465.png

特別說明:用紅線標識的是旋轉之前坐標系的x軸和y軸。

秒速赛车打不开(1).ZUOCESHIDUIPUTONGHTMLYUANSUDEXUANZHUAN,YUANSUDEZHONGXINJIUSHIZUOBIAOXIDEYUANDIAN(0,0)。

秒速赛车打不开(2).YOUCESHIDUISVGYUANSUDEXUANZHUAN,WEIRAODESHISUOZAIDEDANGQIANYONGHUZUOBIAODEYUANDIAN。

再強調一遍:每一次變換,都會創建一個新的坐標系。

css3DErotateXUANZHUANKEYIYOURUXIAXINGSHI:

[CSS] 純文本查看 復制代碼
rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)

angleBIXUYAOYOUDANWEI,LIRUdeg(DU), turn(QUAN), grad,YEKEYISHIYONGcalc()JISUAN。

秒速赛车打不开DANSHISVGYUANSUDErotateZHIYOUYIZHONGXINGSHI:

[XML] 純文本查看 復制代碼
rotate(angle[ x y])

秒速赛车打不开BINGQIEJIAODUBUNENGDAIYOUDANWEI;CHUQUJIAODUZHIWAI,HUANYOUYIGEKEXUANDECANSHU,TAYONGLAIGUIDINGXUANZHUANWEIRAODEZUOBIAO(TACHUNCUIGUIDINGXUANZHUANWEIRAODEZHONGXINDIAN,BINGMEIYOUDUIDANGQIANZUOBIAOXIDEYUANDIANYOURENHEGAIBIAN)。DAIMASHILIRUXIA:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://glbcf.cn/" />
<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>

TONGGUOroate()DEDIERGECANSHUJIANGXUANZHUANZHONGXINYIDONGDAOLEYUANSUDEZHONGXINDIAN。

秒速赛车打不开QIANMIANYIJINGTIDAOGUO,DIERGECANSHUCHUNCUIGUIDINGXUANZHUANWEIRAODEZHONGXINDIAN,BINGMEIYOUDUIDANGQIANZUOBIAOXIDEYUANDIANYOURENHEGAIBIAN,SUOYIHOUMIANZHUIJIADEXUANZHUANBUNENGGONGXIANGZHEGEXUANZHUANZHONGXIN,KANRUXIADAIMA:

[XML] 純文本查看 復制代碼
transform="rotate(45 110 110) rotate(-45)"

DIYIGEXUANZHUANWEIRAOSHIZUOBIAO(110,110),DANSHIDIERGEXUANZHUANSHIWEIRAODEDANGQIANYUANSUSUOZAIDEZUOBIAOXIYUANDIAN。

四.scale縮放:

css3DEscaleSUOFANGJUYOUYIXIAYUFAXINGSHI:

[CSS] 純文本查看 復制代碼
scale3d(x,y,z)
scaleX(x)
scaleY(y)
rotateZ(z)

秒速赛车打不开SVGYUANSUDEscaleZHICHIRUXIAXINGSHI:

[XML] 純文本查看 復制代碼
scale(sx[, sy])

RUGUODIERGECANSHUSHENGLVE,NEIMEyZHOUSUOFANGYUxZHOUSUOFANGXIANGTONG。

TUSHIRUXIA:

1485876426760750.png

秒速赛车打不开YOUMEIYOUFAXIAN,BUDANYUANSUDECHICUNCHANSHENGLESUOFANG,ERQIEZUOBIAOYECHANSHENGLESUOFANG。

秒速赛车打不开ZHEFEICHANGDEHAOJIESHI,YINWEIMEICIBIANHUANDOUHUICHANSHENGYIGEXINDEZUOBIAOXI,ZHEGEXINZUOBIAOXIZHENGGEJINXINGLESUOFANG。

五.skew斜切:

秒速赛车打不开RUGUOJINKANYIGEFANGXIANGDEXIEQIE,JIURUTONGJIANGYIGEJUXINGZAIYIGEFANGXIANGSHANGJINXINGLASHEN(ZONGMIANJIBUBIAN),YIxZHOUXIEQIEWEILIZI:

1485876465394162.jpg

ZAIQIANMIANDEBIANHUANZHONG,DOUSHIZHICHIscale(sx[, sy])LEISIYUFAXINGSHI,DANSHIskewQUEFANQIDAOERXINGZHI,ZHINENGGOUFENKAIXIE:

[XML] 純文本查看 復制代碼
skewX()
skewY()

說明:每一次變換都會創建一個新的坐標系,變換是對整個坐標系的變換,所以導致視覺上元素發生了變換。

TUSHIRUXIA:

1485876515644387.png

秒速赛车打不开TUPIANSHIcss3DUIPUTONGYUANSUDEXIEQIEHEsvgYUANSUZISHENSHUXINGXIEQIEDECHABIE,ZHEYESHIYOUYUZUOBIAOXIYUANDIANDEBUTONGDAOZHIDE。

skewX(α1) skewX(α2)HEskewX(α1 + α2)ZUIZHONGBIANHUANXIAOGUOBUTONG,YINWEIXIEQIEJIAODUHEYUANSUPIANYIDAXIAOFEIJIANDANDEXIANXINGBIANHUA。

特別說明:秒速赛车打不开本文基本翻譯于http://css-tricks.com/transforms-on-svg-elements/,但是經過了自己總結。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部