SVG предоставляет опции для преобразования одного элемента формы SVG или группы элементов SVG. SVG-преобразование поддерживает Перевод, Масштабирование, Поворот и Наклон . Давайте изучим трансформацию в этой главе.
Введение в SVG-трансформацию
SVG представляет новый атрибут transform для поддержки преобразования. Возможные значения: одно или несколько из следующих:
-
Перевести — требуется два варианта, tx относится к переводу по оси x, а ty относится к переводу по оси y. Например — перевод (30 30).
-
Поворот — требуется три варианта, угол относится к углу поворота, cx и cy относятся к центру вращения по осям x и y. Если cx и cy не указаны, то по умолчанию используется текущее начало системы координат. Например — повернуть (60).
-
Scale — требуется два варианта: sx относится к коэффициенту масштабирования по оси x, а sy относится к коэффициенту масштабирования по оси y. Здесь sy является необязательным и принимает значение sx , если оно не указано. Например — шкала (10).
-
Skew (SkewX и SkewY) — требуется один вариант; угол наклона относится к углу вдоль оси x для SkewX и углу вдоль оси y для SkewY. Например — skewx (20).
Перевести — требуется два варианта, tx относится к переводу по оси x, а ty относится к переводу по оси y. Например — перевод (30 30).
Поворот — требуется три варианта, угол относится к углу поворота, cx и cy относятся к центру вращения по осям x и y. Если cx и cy не указаны, то по умолчанию используется текущее начало системы координат. Например — повернуть (60).
Scale — требуется два варианта: sx относится к коэффициенту масштабирования по оси x, а sy относится к коэффициенту масштабирования по оси y. Здесь sy является необязательным и принимает значение sx , если оно не указано. Например — шкала (10).
Skew (SkewX и SkewY) — требуется один вариант; угол наклона относится к углу вдоль оси x для SkewX и углу вдоль оси y для SkewY. Например — 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 и добавьте translate и rotate, как показано ниже.
<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
Чтобы создать SVG с помощью D3.js, давайте следуем инструкциям ниже.
Шаг 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 и установите атрибуты translate и rotate.
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 (), translate (), scale (), rotate () и т. Д. Вы можете включить d3-transform в свою веб-страницу, используя следующий скрипт.
<script src = "http://d3js.org/d3.v4.min.js"></script> <script src = "d3-transform.js"></script>
В приведенном выше примере код преобразования можно записать так, как показано ниже: