SVG提供了转换单个SVG形状元素或SVG元素组的选项. SVG转换支持翻译，缩放，旋转和倾斜.让我们在本章中学习转换.
SVG引入了一个新属性转换来支持转型.可能的值是以下一项或多项:
翻译 : 它需要两个选项， tx 指的是沿x轴的平移， ty 指的是沿y轴的平移.对于示例 : 翻译(30 30).
旋转 : 它需要三个选项，角度指旋转角度， cx 和 cy 指的是x和y轴旋转的中心.如果未指定 cx 和 cy ，则默认为坐标系的当前原点.对于示例 : 旋转(60).
比例 : 它有两个选项， sx 是指沿x轴的缩放因子， sy 是指沿y轴的缩放因子.这里， sy 是可选的，如果未指定，则它取 sx 的值.对于示例 : scale(10).
歪斜(SkewX和SkewY) : 它只需一个选项; 倾斜角是指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创建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组元素并设置translate和rotate属性。
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);
