Расширенная настройка SVG

Изучение SVG, часть 2

Расширенная настройка SVG

Группировка, Определение, Градиент

Привет, ребята, помимо моей предыдущей статьи мы увидели, как создавать основные формы с помощью SVG. Расширяя эти основные формы, он может создавать ваши собственные творческие возможности SVG. В этой статье мы обсудим, как сделать SVG-творчество простым и интеллектуальным с помощью группировки и определения.

С помощью группировки и определения он может группировать набор элементов SVG. Это поможет повторно использовать группу или применить общие свойства к группе - давайте углубимся в концепции группировки и определения.

Перед этим я повторяю: если вы не имеете ни малейшего представления о том, что происходит с SVG или как рисовать базовые фигуры SVG, то я настоятельно рекомендую, пожалуйста, прочтите мою предыдущую статью Все, что вам нужно знать о фигурах SVG и приходите назад сюда.

Группировка

Он может группировать набор элементов SVG в контейнер с помощью элемента ‹g› ‹/g›. Преимущество группировки в том, что она позволяет применять свойства к группе, чтобы они отражались на элементах внутри группы. Еще одно преимущество группировки - это возможность очень легко повторно использовать группу, что означает, что она может создавать дубликаты сгруппированного набора элементов, чтобы вы могли пропустить дублирование кода.

Давайте разберемся с группировкой на нескольких примерах.

Здесь я рисую лист с прикрепленным черешком. Здесь есть два определения пути: одно для листа, а другое - для черешка. Я группирую эти два определения путей и создаю имя для всей группы, называемой «лист».

Вот как создать базовую группу. Теперь узнайте, что делать с этой группой.

Элемент «группа» поддерживает большой набор атрибутов. Изменение значений этих атрибутов приводит к его групповым элементам. Давайте посмотрим на некоторые основные часто используемые атрибуты в группе.

Наполнять

Заливка обычно используется для заливки всей группы элементов цветом. Кроме того, можно переопределить заливку на уровне группы, добавив атрибут заливки для отдельных элементов.

Вот результат для приведенного выше скрипта

В приведенном выше примере вы можете видеть, что в пути листа нет атрибутов заливки. Но для черешкового пути он заменяет темно-зеленую заливку (# 388E3C). Таким образом, на выходе вы можете видеть, что вся группа заменена заливкой группы (# de3e3e), но заливка не применялась к замещенной части, черешку.

Цвет

Цвет атрибута предназначен для определения цвета. Этот атрибут не будет напрямую применяться к подэлементам. Для применения определенного цвета необходимо установить значение как «текущий цвет» для таких атрибутов, как заливка, обводка, стоп-цвет и светлый цвет, чтобы оно заменило определенное значение цвета для атрибута.

Давайте посмотрим, как работает цвет, на нескольких примерах.

Здесь результат очень похож на результат предыдущего примера.

В примере вы можете видеть, что для группы определен цвет (# de3e3e) с помощью атрибута color. Этот цвет можно применить к заливке атрибута элементов группы с именем ‘currentcolor’. Он заменит значение «текущий цвет» определением атрибута цвета.

Непрозрачность

Он используется для настройки прозрачности дочерних элементов группы.

Инсульт и инсульт Дашаррей

Это необходимо для настройки свойств, связанных с штрихом, для элементов группы.

Перейдем к некоторым примерам.

Вот полный вывод для приведенного выше фрагмента кода.

В приведенном выше примере к нему применяется обводка фиолетового цвета шириной 3 и превращается в массив штрихов с шаблоном 6 2. Тире-массив означает, что первые 6 пикселей показывает линия, а следующие 2 пикселя линия становится скрытой.

Преобразовать

Теперь мы переходим к самому важному и полезному свойству элемента SVG. Преобразование является не только атрибутом группы, но также может применяться к элементам. С помощью преобразования он может выполнять различные преобразования элементов или группы, такие как поворот, перевод или смещение, наклон и масштабирование. Давайте подробно обсудим каждую из этих операций.

Перевести

Translate используется для смещения. Translate принимает два параметра: значение оси x и необязательное значение оси y. В зависимости от значения, присвоенного функции translate, она дополнительно смещает значения по осям x и y.

Syntax: translate(<x> [<y>])
x new position = x old position+ <x>
y new position= y old position+ <y>

Применим перевод на нашем примере листа.

В приведенном выше примере группа «лист» переводит 500 единиц прямо из своего фактического местоположения. Это связано с вызовом преобразования translate (500,0).

Масштаб

Он используется для изменения размера группы или элемента. Он принимает два числа x масштабный коэффициент и масштабный коэффициент y. Если значение y не указано, предполагается, что оба значения одинаковы.

Syntax: scale(<x> [<y>])
Here
<x> — Scaling factor for x-axis.
<y> — Scaling factor for y-axis.

Давайте посмотрим, как работает масштабное преобразование на нашем примере листа.

В приведенном выше примере я применил два преобразования для листа группы. Во-первых, я перевел его позицию на 500 единиц вправо (что мы видели в предыдущем примере), также применил коэффициент масштабирования по x и y, равный 0,5, что уменьшит размер листа вдвое.

Повернуть

Поворот используется для поворота элемента или группы. Функция вращения принимает доступ к вращению, за которым следует дополнительная точка вращения.

Syntax: rotate(<a> [<x> <y>])
Here
<a> — rotating angle
<x> — x-axis displacement for the rotation point
<y> — y-axis displacement for the rotation point

Перейдем к этому примеру.

В приведенном выше примере преобразование поворота на 30 градусов применено к точке (0,450). В результате вся группа листьев поворачивается на 30 градусов относительно точки (0,450).

SkewX и SkewY

Эти функции используются для наклона оси x или y на угол.

Syntax: skewX(<a>)//skew along the x-axis by a degree
skewY(<a>)//skew along the y-axis by a degree

Давайте попробуем наклонить прямоугольник по осям x и y.

Здесь показаны два прямоугольника, один из которых наклонен по оси X на 10 градусов, а другой - по оси Y на 10 градусов.

Матрица

С помощью матричной функции он может выполнять комбинацию вышеупомянутых операций. Но это непросто, это немного сложно по сравнению с приведенными выше преобразованиями.

Матрица 3х3 выглядит следующим образом

a  c  e
b  d  f           -----> matrix(a,b,c,d,e,f)
0  0  1

нижняя строка для матрицы всегда одинакова, поэтому в матричной функции SVG принимают только 6 значений первых двух строк. Изменяя значения этих 6 параметров, он может выполнять все виды преобразований, которые мы обсуждали.

Ниже показано, как применить эти преобразования в матричной перспективе.

Translate
0  0  tx
0  1  ty
0  0  1
Syntax: matrix(1,0,0,1,tx,ty)
Rotate
cos(a)   -sin(a)  0
sin(a)    cos(a)  0
     0        0   1
Syntax: matrix( cos(a), sin(a),-sin(a),cos(a),0,0 )
Scale
sx   0   0
 0  sy   0
 0   0   1
Syntax: matrix(sx,0,0,sy,0,0)
SkewX
1  tan(a)    0
0       1    0
0       0    1
Syntax: matrix(1,0,tan(a),1,0,0)
SkewY
Skew
1       0    0
tan(a)  1    0
0       0    1
Syntax: matrix(1,tan(a),0,1,0,0)

Давайте посмотрим на несколько примеров преобразования матриц.

В приведенном выше примере логика, лежащая в основе матрицы, состоит в том, чтобы повернуть группу на 30 градусов и сдвинуть группу на 400 единиц вправо. 0,5 - это значение sin 30, а 0,866 - значение cos 30. Основная проблема с матричным преобразованием заключается в понимании и реализации матричной логики, которая немного сложна по сравнению с другими преобразованиями.

Группировка многоразовая

Одно из главных преимуществ группировки - возможность многократного использования группы. Чтобы вам не захотелось снова переписывать группу. Он может создавать повторяющиеся группы и применять к ним различные преобразования. Это делается с помощью тега ‹use›.

Давайте посмотрим, как работает возможность многократного использования в группе, на нескольких примерах.

В приведенном выше фрагменте кода создается группа, называемая «двухлистной», путем объединения «листовой» группы и ее отражения. Отражение создается с помощью тега use. Кроме того, он повторно использовал группу «два листа» и сделал два дополнительных слоя листа.

Определение

Определение используется для определения графического объекта и может использовать более позднее время. Тег Def используется для определения графического объекта. Для отображения или использования объекта вы хотите использовать тег ‹use›, внутри которого необходимо передать URL-адрес определения.

Разница между группой и определением заключается в том, что в случае группировки объект уже отображается в представлении, но в определении он отображается только в том случае, если он использует синтаксис ‹use› путем ссылки на идентификатор объекта.

Определение в основном используется в случае определения объектов многократного использования и для создания градиентов. Давайте посмотрим на несколько примеров определения.

В приведенном выше примере вы можете видеть, что лист группы помещен в раздел определения (‹defs›). Таким образом, он не будет напрямую отображаться в представлении. Чтобы сделать его видимым, необходимо использовать тег ‹use›.

Другой вариант использования ‹defs› - создание градиента. Давайте посмотрим подробно, как создать градиент.

Градиент

Изображение становится таким совершенным только в том случае, если его цвет впечатляет. Цвета градиента сделают изображение таким красивым. Давайте посмотрим, как создать разные цвета градиента с помощью SVG.

Есть два вида градиентов. Линейный градиент и радиальный градиент

Линейный градиент

Линейный градиент используется для линейного определения градиента. Линейные градиенты обычно строятся с помощью тега ‹linearGradient›. Внутри тега ‹linearGradient› он использует элемент ‹stop› для упоминания положений каждого цвета градиента. Кроме того, SVG предоставляет n способов настройки линейного градиента с помощью атрибутов. Вот несколько необходимых атрибутов из него.

gradientTransform: с помощью этого атрибута можно применять преобразования к градиенту.

x1: координата x начальной точки линейного градиента.

x2: координата x конечной точки линейного градиента.

Радиальный градиент

Он используется для радиального определения градиента. Это реализуется с помощью тега ‹radialGradient›. Подобно линейному градиенту, атрибут ‹stop› используется для определения цвета градиента и его положения. Радиальный градиент также поддерживает несколько атрибутов для настройки. Отсюда вытекают важные атрибуты из него.

cx: определяет координату x конечной окружности радиального градиента.

cy: Определяет координату y конечной окружности радиального градиента.

fr: определяет радиус начальной окружности радиального градиента.

fx: определяет координату x начальной окружности радиального градиента.

fy: определяет координату y начальной окружности радиального градиента.

gradientTransform: этот атрибут обеспечивает дополнительные преобразования градиента.

Давайте посмотрим, как градиенты работают в SVG на некоторых примерах.

Результат приведенного выше фрагмента кода выглядит следующим образом.

Теперь в этой статье мы увидели, как сделать SVG красивее. Надеюсь, вы это хорошо понимаете.