5. svg學習筆記-座標系變換

時間 2019-12-08

標籤 svg 學習筆記座標系變換简体版

原文原文鏈接

以前咱們編寫圖形元素的時候，編寫好了位置大小就是固定的，經過座標系變換，能夠移動縮放，旋轉圖形，但必須聲明的是，進行變換時是圖形相對於座標系的變化，就是圖形是不發生變化的，而是座標系發生了變化，好比縮放圖形的時候，是圖形的相對座標系進行縮放而後圖形重繪，因此你會看到怪異的現象，當你指定圖形進行縮放的時候，圖形也有了位移。html

translate變換

translate變化就是將圖形進行位移，在圖形元素上引用格式以下：svg

transform="translate(x,y)"

x是水平上的位移距離，y是垂直方向上的位移距離spa

示例以下：3d

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <g id="rec">
            <rect x="0" y="0" width="100" height="100" stroke="black" fill="none">
        </g>
        <use xlink:href="#rec" transform="translate(10,10)"></use>
    </svg>
</body>
</html>

效果以下：code

在水平方向上平移了10個單位，在豎直方向上也平移了10個單位orm

scale變換

scale變換能夠將圖形元素進行縮放，格式以下：htm

transform="scale(value)"
transform="scale(x-value, y-value)"

第一種形式的變化是將圖形縮放到原來的value倍，第二種形式是在x軸上縮放爲原來的x-value倍，在y軸上縮放爲原來的y-value倍blog

示例以下：ip

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <g id="rec">
            <rect x="10" y="10" width="50" height="50" stroke="black" fill="none"></rect>
        </g>
        <use xlink:href="#rec" transform="scale(2)">
    </svg>
</body>
</html>

效果以下：get

你可能會以爲奇怪，並無進行translate變換，可是圖形卻進行了位移，本文開頭就陳述過了，變換是圖形相對於座標系的變換，也就是說最終的變換是座標系的變換，並非圖形的變換，上述的scale變換是將圖形的座標系的單位變成了原來的2倍，因此你看的到就是放大後的圖形距離原點的距離是原來圖形距離原點的距離的2倍，圖形也放大到了原來的2倍

rotate變換

rotate變換能夠根據指定的角度旋轉座標系。在svg中，水平線的角度爲0（時鐘3點鐘方向），而後順時針遞增。使用方式有如下幾種：

transform="rotate(angle)"
transform="rotate(angle，centerX，centerY)"

第一種方式中angle是旋轉的角度，默認的旋轉中心是座標原點，第二種方式中angle是旋轉角度，centerX和centerY是旋轉中心的座標，示例以下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <g id="rec">
            <rect x="100" y="100" width="50" height="50" stroke="black" fill="none"></rect>
        </g>
        <use xlink:href="#rec" transform="rotate(30)">
    </svg>
</body>
</html>

效果以下：

旋轉中心爲座標原點，旋轉角度爲30度，將以上代碼中的<use>元素改成以下：

<use xlink:href="#rec" transform="rotate(30,125,125)">

效果以下：

skewX和skewY變換

skewX變換就是讓x軸傾斜必定的角度，同理，skewY變換能夠讓y軸傾斜必定的角度，使用格式以下：

transform="skewX(angle)"      transform="skewY(angle)"

angle即爲旋轉的角度，示例以下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <g id="rec">
            <rect x="100" y="100" width="50" height="50" stroke="black" fill="none"></rect>
        </g>
        <use xlink:href="#rec" transform="skewX(30)">
    </svg>
</body>
</html> <!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <g id="rec">
            <rect x="100" y="100" width="50" height="50" stroke="black" fill="none"></rect>
        </g>
        <use xlink:href="#rec" transform="skewX(30)">
    </svg>
</body>
</html>

效果以下：

變換序列

同一個圖形元素能夠同時指定多個變換，這稱爲變換序列。

示例以下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <g id="rec">
            <rect x="100" y="100" width="50" height="50" stroke="black" fill="none"></rect>
        </g>
        <use xlink:href="#rec" transform="skewX(30) rotate(20)">
    </svg>
</body>
</html>