SVG Transformation

优质

小牛编辑

122浏览

2023-12-01

SVG提供了转换单个SVG形状元素或SVG元素组的选项。 SVG变换支持Translate, Scale, Rotate和Skew 。让我们在本章学习转型。

SVG转换简介

SVG引入了一个新属性， transform为支持转换。可能的值是以下一项或多项，

Translate - 它有两个选项， tx沿x轴平移， ty沿y轴平移。例如 - 翻译（30 30）。
Rotate - 它有三个选项， angle指旋转角度， cx和cy指的是x和y轴旋转的中心。如果未指定cx和cy ，则默认为坐标系的当前原点。例如 - 旋转（60）。
Scale - 它有两个选项， sx沿x轴的比例因子， sy沿y轴的比例因子。这里， sy是可选的，如果没有指定，则它取sx的值。例如 - 比例（10）。
Skew (SkewX and SkewY) - 只需一个选项; skew-angle指的是SkewX沿x轴的角度和SkewY沿y轴的角度。例如 - skewx（20）。

带有translate的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图像，请尝试缩放，并使用变换旋转它，让我们按照下面给出的步骤进行操作。

Step 1 - 创建SVG图像并将宽度设置为300像素，将高度设置为300像素。

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

Step 2 - 创建一个SVG组。

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

Step 3 - 创建一个长度为60，高度为30的矩形，并用绿色填充。

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

Step 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>

Step 5 - 添加转换属性并添加平移和旋转，如下所示。

<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>

Step 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，请按照下面给出的步骤操作。

Step 1 - 创建一个容器来保存SVG图像，如下所述。

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

Step 2 - 创建SVG图像，如下所述。

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

Step 3 - 创建SVG组元素并设置转换和旋转属性。

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

Step 4 - 创建一个SVG矩形并将其附加到组中。

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

Step 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(), 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);