D3.js - SVG 變換

上一頁
下一頁

SVG 提供了變換單個 SVG 形狀元素或一組 SVG 元素的選項。SVG 變換支援**平移、縮放、旋轉**和**傾斜**。讓我們在本章學習變換。

SVG 變換簡介

SVG 引入了一個新的屬性，**transform** 來支援變換。可能的值如下所示，可以是一個或多個：

  • **平移 (Translate)** − 它需要兩個引數，**tx** 指的是沿 x 軸的平移，**ty** 指的是沿 y 軸的平移。**例如** − translate(30 30)。

  • **旋轉 (Rotate)** − 它需要三個引數，**angle** 指的是旋轉角度，**cx** 和 **cy** 指的是旋轉中心在 x 軸和 y 軸上的座標。如果未指定 **cx** 和 **cy**，則預設為座標系的當前原點。**例如** − rotate(60)。

  • **縮放 (Scale)** − 它需要兩個引數，**sx** 指的是沿 x 軸的縮放因子，**sy** 指的是沿 y 軸的縮放因子。這裡，**sy** 是可選的，如果未指定，則取 **sx** 的值。**例如** − scale(10)。

  • **傾斜 (Skew (SkewX 和 SkewY))** − 它需要一個引數；**skew-angle** 指的是 SkewX 沿 x 軸的角度，SkewY 沿 y 軸的角度。**例如** − skewx(20)。

下面是一個帶有平移變換的 SVG 矩形的示例：

線上演示 
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "300" height = "300">
         <rect x = "20" 
            y = "20"
            width = "60"
            height = "60"
            fill = "green"
            transform = "translate(30 30)">
         </rect>
      </svg>
   </body>
</html>

以上程式碼將產生以下結果。

可以使用空格作為分隔符為單個 SVG 元素指定多個變換。如果指定多個值，則變換將按指定的順序依次應用。

線上演示 
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "300" height = "300">
         <rect x = "20" 
            y = "20" 
            width = "60" 
            height = "60" 
            fill = "green" 
            transform = "translate(60 60) rotate(45)">
         </rect>
      </svg>
   </body>
</html>

以上程式碼將產生以下結果。

變換也可以應用於 SVG 組元素。這使得可以變換在 SVG 中定義的複雜圖形，如下所示。

線上演示 
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "300" height = "300">
         <g transform = "translate(60,60) rotate(30)">
            <rect x = "20" 
               y = "20" 
               width = "60" 
               height = "30" 
               fill = "green">
            </rect>
            <circle cx = "0" 
               cy = "0" 
               r = "30" 
               fill = "red"/>
         </g>
      </svg>
   </body>
</html>

以上程式碼將產生以下結果。

一個簡單的例子

要建立一個 SVG 影像，並使用變換對其進行縮放和旋轉，請按照以下步驟操作：

**步驟 1** − 建立一個 SVG 影像，並將寬度設定為 300 畫素，高度設定為 300 畫素。

<svg width = "300" height = "300">

</svg>

**步驟 2** − 建立一個 SVG 組。

<svg width = "300" height = "300">
   <g>
   </g>
</svg>

**步驟 3** − 建立一個長度為 60，高度為 30 的矩形，並用綠色填充。

<svg width = "300" height = "300">
   <g>
      <rect x = "20" 
         y = "20" 
         width = "60" 
         height = "30" 
         fill = "green">
      </rect>
   </g>
</svg>

**步驟 4** − 建立一個半徑為 30 的圓形，並用紅色填充。

<svg width = "300" height = "300">
   <g>
      <rect x = "20" 
         y = "20" 
         width = "60" 
         height = "30" 
         fill = "green">
      </rect>
      <circle cx = "0" 
         cy = "0" 
         r = "30" 
         fill = "red"/>
   </g>
</svg>

**步驟 5** − 新增 transform 屬性，並新增平移和旋轉，如下所示。

<svg width = "300" height = "300">
   <g transform = "translate(60,60) rotate(30)">
      <rect x = "20" 
         y = "20" 
         width = "60" 
         height = "60" 
         fill = "green">
      </rect>
      <circle cx = "0" 
         cy = "0" 
         r = "30" 
         fill = "red"/>
   </g>
</svg>

**步驟 6** − 建立一個 HTML 文件，“svg_transform_rotate_group.html”，並將上述 SVG 整合進去，如下所示。

線上演示 
<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
         <svg width = "300" height = "300">
            <g transform = "translate(60,60) rotate(30)">
               <rect x = "20" 
                  y = "20" 
                  width = "60" 
                  height = "60" 
                  fill = "green">
               </rect>
               <circle cx = "0" 
                  cy = "0" 
                  r = "30" 
                  fill = "red"/>
            </g>
         </svg>
      </div>
   </body>
</html>

以上程式碼將產生以下結果。

使用 D3.js 進行變換

要使用 D3.js 建立 SVG，請按照以下步驟操作：

**步驟 1** − 建立一個容器來容納 SVG 影像，如下所示。

<div id = "svgcontainer"></div>

**步驟 2** − 建立一個 SVG 影像，如下所示。

var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

**步驟 3** − 建立一個 SVG 組元素，並設定平移和旋轉屬性。

var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");

**步驟 4** − 建立一個 SVG 矩形，並將其附加到組中。

var rect = group
   .append("rect")
   .attr("x", 20)
   .attr("y", 20)
   .attr("width", 60)
   .attr("height", 30)
   .attr("fill", "green")

**步驟 5** − 建立一個 SVG 圓形，並將其附加到組中。

var circle = group
   .append("circle")
   .attr("cx", 0)
   .attr("cy", 0)
   .attr("r", 30)
   .attr("fill", "red")

完整的程式碼如下：

線上演示 
<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>SVG rectangle</title>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer"></div>
         <script language = "javascript">
            var width = 300;
            var height = 300;
            var svg = d3.select("#svgcontainer")
               .append("svg")
               .attr("width", width)
               .attr("height", height);

            var group = svg.append("g")
               .attr("transform", "translate(60, 60) rotate(30)");
            
            var rect = group.append("rect")
               .attr("x", 20)
               .attr("y", 20)
               .attr("width", 60)
               .attr("height", 30)
               .attr("fill", "green")
            
            var circle = group
               .append("circle")
               .attr("cx", 0)
               .attr("cy", 0)
               .attr("r", 30)
               .attr("fill", "red")
         </script>
      </div>
   </body>
</html>

以上程式碼將產生以下結果。

變換庫

D3.js 提供了一個單獨的庫來管理變換，而無需手動建立 transform 屬性。它提供了處理所有型別變換的方法。一些方法是 **transform()、translate()、scale()、rotate()** 等。您可以使用以下指令碼將 **d3-transform** 包含到您的網頁中。

<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "d3-transform.js"></script>

在上面的示例中，變換程式碼可以寫成如下所示：

var my_transform = d3Transform()
   .translate([60, 60])
   .rotate(30);

var group = svg
   .append("g")
   .attr("transform", my_transform);
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.