SVG中的圖形分組和坐標系統(tǒng)

使用<g>標簽進行圖形分組

  • <g>標簽來創(chuàng)建分組
  • <g>標簽中的子元素繼承<g>標簽中的屬性
  • transform屬性定義坐標變換
  • 可以嵌套使用

SVG坐標系統(tǒng)

  1. 用戶坐標系
    svg是其下所有子元素的最終父元素，用戶坐標系即svg本身的坐標系
  • OA是svg元素的坐標系，是用戶坐標系
  1. 自身坐標系
    每個圖形元素或獨立分組自身帶有坐標系
  • svg元素的自身坐標系是OA
  • id=“B”的元素的自身坐標系是OB
  • id="C"的元素的自身坐標系是OC
  • id="D"的元素的自身坐標系是OD
  1. 前驅(qū)坐標系
    父容器的坐標系
  • svg元素是所有元素的父元素，其沒有父容器，故無前驅(qū)坐標系
  • id=“B”的元素的父元素是svg元素，其前驅(qū)坐標系是OA
  • id="C"的元素和id="D"的元素是一個整體，其共同父容器是id=“B”的元素，故其前驅(qū)坐標系是OB
  • 的自身坐標系是OB

自身坐標系在沒有設(shè)置transform屬性時，與其前驅(qū)坐標系重合

  1. 參考坐標系
    使用其它坐標系來考究自身的情況時使用，即用別人的坐標系來衡量自己
用Ouser作為參考坐標系，矩形的坐標是(50, 50)

線性變換

  1. 平移
  1. 旋轉(zhuǎn)
  1. 縮放

線性變換列表

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容