English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Преобразования SVG создают формы в SVG-изображениях. Например, перемещение, масштабирование и вращение форм. Это удобный способ отображения текста вертикально или по диагонали.
Это пример:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="50" y="50" height="110" width="110" style="stroke:#ff0000; fill: #ccccff" transform="translate(30) rotate(45 50 50)" > </rect> <text x="70" y="100" transform="translate(30) rotate(45 50 50)" >oldtoolbag.com</text> </svg>Тестирование看看‹/›
Эффект изображения после выполнения:
обратите внимание<rect>элементаtransform и <text>oftransformатрибуту. Этот атрибут определяет преобразование, которое должно быть применено к форме. В этом примере применяются трансляция и вращение. Оба будут объяснены позже в статье.
Вы можете применить преобразование ко всем SVG-формам. Вы также можете применить преобразование к<g>
элементы, что позволяет за один раз эффективно преобразовать весь набор элементов. Также можно преобразовывать градиенты и узоры заливки.
SVG предоставляет четыре функции преобразования:
translate()
rotate()
scale()
skew()
matrix()
Следующие разделы предоставят более详细的 описание каждого из этих функций.
Действительно, функция преобразования не преобразует саму SVG-форму, а преобразует базовую систему координат этой формы. Поэтому, даже если ширина отображается в кратное число, форма с шириной 20 умноженной на 2 логически все еще имеет ширину 20.
translate()функция перемещает форму. Вы будетеx и y значение передается вtranslate()функция. Это пример:
translate(50,25)
Этот пример перемещает форму на 50 единиц по оси x и на 25 единиц по оси y.
Этот пример показывает два положения и размеры равные формы, с и без трансляции:
<svg width="500" height="150"> <rect x="20" y="20" width="50" height="50" style="fill: #cc3333"/> <rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="translate(75,25)" </svg>Тестирование看看‹/›
Эффект изображения после выполнения:
Обратите внимание, что по сравнению с первой (красной) формой, вторая (голубая) форма смещена на 75 единиц по оси x и на 25 единиц по оси y.
rotate()Функция вращает форму вокруг точки 0,0. Вот пример, показывающий прямоугольник (контур) и равный прямоугольник (заполненный), повернутый на 15 градусов:
<svg width="500" height="150"> <rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;" <rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15)" </svg>Тестирование看看‹/›
Эффект изображения после выполнения:
Если нужно повернуть вокруг точки, отличной от 0,0, передайте координаты x и y этой точки вtransformФункция. Вот пример, показывающий прямоугольник (контур) без поворота и равный прямоугольник (заполненный) вокруг его центра, повернутый на 15 градусов:
<svg width="500" height="150"> <rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;" <rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15, 40, 40)" </svg>Тестирование看看‹/›
Эффект изображения после выполнения:
Все повороты являются часовой стрелкой, их угол от 0 до 360. Если нужно повернуть против часовой стрелки, передайте отрицательное значение угла вrotate()Функция.
scale()Функция масштабирует форму пропорционально.scale()Функция может масштабировать размер формы и координаты ее положения. Таким образом, прямоугольник с шириной 20 и высотой 30, масштабированный в пропорции 20 умножается на 2, находится в положении 20,20, с шириной 40 и высотой 60.
scale()Функция также может масштабировать ширину контура формы.
Этот пример показывает прямоугольник (голубого цвета) с координатами 10,0, шириной 20 и высотой 20, а также пропорциональный прямоугольник (черного цвета) с коэффициентом масштабирования 2:
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" <rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2)" </svg>Тестирование看看‹/›
Эффект изображения после выполнения:
Обратите внимание, как масштабируется положение и размер прямоугольника.
Вы можете масштабировать форму по осям x и y с другими коэффициентами. Для этого вы можете добавить кscale()Функция предоставляет параметры x-scale и y-scale, как показано:
scale(2,3);
Этот пример масштабирует форму в 2 раза по оси x и в 3 раза по оси y. Вот пример:
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" <rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2,3)" </svg>Тестирование看看‹/›
Эффект изображения после выполнения:
Пожалуйста, обратите внимание, как изменяется ширина контура после масштабирования прямоугольника (черного), и как масштабирование по осям x и y differs.
scale()С помощью масштабирования по оси x или y с коэффициентом -1
Эта функция может быть использована в качестве функции зеркала. После завершения вы должны сначала переместить (передвинуть) эту форму в направлении x или y, иначе форма зеркала появится за пределами SVG-канвы.
Вот пример:
<svg width="500" height="150"> <path d="M20,20 l20,20 l0,20 l-20,20 Z" style="stroke: #3333cc; fill:none;" /> <path d="M20,20 l20,20 l0,20 l-20,20 Z" style="stroke: #000000; fill:none;" transform="translate(100, 0) scale(-1, 1) " </svg>Тестирование看看‹/›
Результат изображения линии, нарисованной в точке x = 100 (поскольку прямоугольник сместился на 100 в направлении x).
Синий - это исходная форма. Чёрная форма - это форма масштабирования, смещённая.
skewX()иskewY()Функции смещения по оси x и y. На самом деле, эти функции смещают заданную ось на заданный угол в градусах.
Вот примеры отображения с различнымиskewX()Некоторые примеры значений прямоугольника.
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(10)" /> <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(45)" /> <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(60)" </svg>Тестирование看看‹/›
Эффект изображения после выполнения:
Как вы видите,skewX()Функция делает вертикальную линию看起来 как будто повернута на заданный угол. Поэтому,skewY()Функция делает горизонтальную линию看起来 как будто повернута на заданный угол. Вот несколько примеров:
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(60)" /> <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(45)" /> <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(10)" </svg>Тестирование看看‹/›
Преобразование также можно представить в виде матрицы. Матрица выглядит следующим образом:
a c e b d f 0 0 1
Поскольку можно указать только первые шесть значений, функции преобразования матрицы могут предоставлять только шесть значений. Вот пример:
transform="matrix(a,b,c,d,e,f)"
Другие функции преобразования можно представить в виде матрицы. Вот несколько примеров:
Translate 1 0 tx 0 1 ty 0 0 1 matrix(1,0,0,1,tx,ty)
Rotate cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1 matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)
Примечание: это значениеcos(a)иsin(a)Параметр, который необходимо предварительно вычислить перед вставкой матрицы.aявляется углом поворота.
Scale sx 0 0 0 sy 0 0 0 1 matrix(sx,0,0,sy,0,0)
Преобразование смещения по оси x можно записать следующим образом:
Skew 1 tan(a) 0 0 1 0 0 0 1 matrix(1,0,tan(a),1,0,0)
tan(a)Значения вставляютсяmatrix()Функции необходимо предварительно вычислить до их использования.
Преобразование смещения по оси y можно представить следующим образом:
Skew 1 0 0 tan(a) 1 0 0 0 1 matrix(1,tan(a),0,1,0,0)
Это пример SVG-матричного преобразования, имитирующего простые функции преобразований:
<svg width="500" height="150"> <rect x="20" y="20" width="50" height="50" style="fill: #cc3333"/> <rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="matrix(1,0,0,1,100,20)" /> </svg>Тестирование看看‹/›
Эффект изображения после выполнения:
Обратите внимание, как преобразуется правый прямоугольник (голубой) по сравнению с левым (красный).
Преобразования можно комбинировать. Вы можете сделать это, добавив вtransformМножественные функции преобразований могут быть размещены в свойстве.
Это пример, в котором прямоугольник сначала перемещается (переносится), а затем вращается. Этот пример показывает прямоугольник до и после применения любого преобразования (черный) и после (голубой).
<svg width="500" height="150"> <rect x="50" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="translate(50,0) rotate(30)" /> </svg>Тестирование看看‹/›
Эффект изображения после выполнения:
Порядок преобразований важен. ВtransformПорядок указания функций преобразований в свойстве определяет их порядок применения к shape.
Следующий пример объясняет различия между преобразованиями shapes, которые сначала перемещаются и вращаются, а затем вращаются и перемещаются:
<svg width="500" height="150"> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; stroke-width: 2px; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #3333cc; stroke-width: 2px; fill:none;" transform="translate(100,0) rotate(45)" /> <rect x="50" y="10" width="20" height="30" style="stroke: #cc3333; stroke-width: 2px; fill:none;" transform="rotate(45) translate(100,0)" /> </svg>Тестирование看看‹/›
Эффект изображения после выполнения:
Черный прямоугольник не применяет никаких преобразований. Сначала переведем синий прямоугольник, затем повернем. Сначала повернем красный прямоугольник, затем переведем.