svg06——svg中座標變換與順序的關係

smile1213發表於2021-12-03
SVG

一、什麼是座標變換

  • 在svg中，座標變換 是對 一個座標系 到 另一個座標系 的變換的描述
  • 在上一篇中我們說到: transform 是 基於前驅座標系 的 自身座標系 變換

現在我們來親自試驗下，座標系 與 其前驅座標系 都變換時，順序不同有怎樣的影響

二、座標變換與順序的關係（座標系與前驅座標系）

1、座標系與前驅座標系都做 平移

<!-- g 先 translate(50, 0)，rect 再 translate(0, 50)  -->
<svg width="300" height="200">
  <g transform="translate(50, 0)">
    <rect x="0" y="0" width="100" height="50" transform="translate(0, 50)" fill="pink"></rect>
  </g>
</svg>
<!-- g 先 translate(0, 50)，rect 再 translate(50, 0)  -->
<svg width="300" height="200">
  <g transform="translate(0, 50)">
    <rect x="0" y="0" width="100" height="50" transform="translate(50, 0)" fill="pink"></rect>
  </g>
</svg>
g 先 translate(50, 0)，rect 再 translate(0, 50) ：

在這裡插入圖片描述

g 先 translate(0, 50)，rect 再 translate(50, 0)

在這裡插入圖片描述

前驅座標系與自身座標系都做 平移 變換時，對自身座標系來說 結果是一樣的

2、座標系與前驅座標系都做 旋轉

<!-- g 先 rotate(30)，rect 再 rotate(15)  -->
<svg width="300" height="200">
  <g transform="rotate(30)" x="50" y="50">
    <rect x="0" y="0" width="100" height="50" transform="rotate(15)" fill="pink"></rect>
  </g>
</svg>
<!-- g 先 rotate(15)，rect 再 rotate(30)  -->
<svg width="300" height="200">
  <g transform="rotate(15)">
    <rect x="0" y="0" width="100" height="50" transform="rotate(30)" fill="pink"></rect>
  </g>
</svg>
g 先 rotate(30)，rect 再 rotate(15)

在這裡插入圖片描述

g 先 rotate(15)，rect 再 rotate(30)

在這裡插入圖片描述

前驅座標系與自身座標系都做 旋轉 變換時，對自身座標系來說 結果是一樣的

3、座標系與前驅座標系做 一次平移 一次旋轉

<!-- g 先 translate(0, 50)，rect 再 rotate(30) -->
<svg width="300" height="200">
  <g transform="translate(0, 50)" x="50" y="50">
    <rect x="0" y="0" width="100" height="50" transform="rotate(30)" fill="pink"></rect>
  </g>
</svg>
<!-- g 先 rotate(30)，rect 再 translate(0, 50) -->
<svg width="300" height="200">
  <g transform="rotate(30)">
    <rect x="0" y="0" width="100" height="50" transform="translate(0, 50)" fill="pink"></rect>
  </g>
</svg>
g 先 translate(0, 50)，rect 再 rotate(30)

在這裡插入圖片描述

g 先 rotate(30)，rect 再 translate(0, 50)

在這裡插入圖片描述

我們發現了不同！為了看的清楚，我手繪了變換過程

尺寸不準，見諒！陰影部分就是上面截圖中矩形的效果

在這裡插入圖片描述

重要：rect 的任何變換都是基於已經變換了的 g 的座標系

三、如果是同一圖形的兩個變換改變順序呢？

1、值得說的是：svg中的 transform，是可以鏈式書寫的，依次呼叫

例如：下圖中可以看出，兩次 translate(0, 50) 變換都是生效的，進行了疊加

在這裡插入圖片描述

2、通過分析我們不難得知，同一圖形：

  • 連續多次平移 交換位置，結果是相同的
  • 連續多次旋轉 交換位置，結果是相同的

3、我們單獨看下，平移和旋轉交換位置

<!-- 先平移再旋轉： -->
<svg width="300" height="200">
  <g>
    <rect x="0" y="0" width="100" height="50" transform="translate(0, 50) rotate(30)" fill="pink"></rect>
  </g>
</svg>
<!-- 先旋轉再平移 -->
<svg width="300" height="200">
  <g>
    <rect x="0" y="0" width="100" height="50" transform="rotate(30) translate(0, 50)" fill="pink"></rect>
  </g>
</svg>

先平移再旋轉：
在這裡插入圖片描述

先旋轉再平移：
在這裡插入圖片描述

大家肯定都猜到了這個結果，原理其實和上面描述的是一致的，區別是兩次變換都在自身座標系而已。

所以後面同時進行平移旋轉的時候，一定要注意順序的影響哦~

kk...週五啦，週末愉快哦

相關文章