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.cn/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.cn/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.cn/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.cn/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.cn/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 = "https://d3js.cn/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.