Элемент SVG <g>

Элемент SVG <g> используется для группировки SVG форм. После группировки вы можете преобразовывать всю форму, как если бы вы преобразовывали отдельную форму. Это преимущество по сравнению с вложенным элементом <svg>, который не может быть отдельной целью преобразования. Вы также можете устанавливать стиль группового элемента и повторно использовать их, как если бы они были отдельными элементами.

Элемент g используется в качестве контейнера для комбинирования объектов. Преобразования, добавленные к элементу g, применяются ко всем его подэлементам. Свойства, добавленные к элементу g, наследуются всеми его подэлементами. Кроме того, элемент g можно использовать для определения сложных объектов, которые затем можно ссылаться с помощью элемента <use>.

Пример SVG <g> элемента

Это простой SVG <g>Пример:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　
　　　　<g>
　　　　　　Если нужно использовать атрибуты x и y для перемещения всех форм внутри элемента <g>, то элемент <g> нужно вложить в элемент <svg>. Элемент <svg> имеет атрибуты x и y. Вот пример:
　　　　　　　　　　<line x1="10" y1="10" x2="85" y2="10"
　　　　　　style="stroke: #006600;"/>
　　　　　　　　　　<rect x="10" y="20" height="50" width="75"
　　　　　　style="stroke: #006600; fill: #006600"/>
　　　　　　　　<text x="10" y="90" style="stroke: #660000; fill: #660000">
　　　　</g>
</svg>

Эффект изображения после выполнения:

Этот пример показывает, как три формы комбинируются с помощью элемента <g>. Как здесь указано, в этой группе нет особой пользы. Но обратите внимание, что происходит, когда мы запрашиваем преобразование элемента <g>. Это код:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<g transform="rotate(45 50 50)">
　　　　　　Если нужно использовать атрибуты x и y для перемещения всех форм внутри элемента <g>, то элемент <g> нужно вложить в элемент <svg>. Элемент <svg> имеет атрибуты x и y. Вот пример:
　　　　　　　　　　<line x1="10" y1="10" x2="85" y2="10"
　　　　　　style="stroke: #006600;"/>
　　　　　　　　　　<rect x="10" y="20" height="50" width="75"
　　　　　　style="stroke: #006600; fill: #006600"/>
　　　　　　　　<text x="10" y="90" style="stroke: #660000; fill: #660000">
　　　　</g>
</svg>

Эффект изображения после выполнения:

Внимание<g>как все формы вокруг точки 50,50 вращаются на 45 градусов.

стиль элемента g наследуется его подэлементами

<g>Стиль элемента CSS наследуется его подэлементами. Это пример:

<svg　width="320"　height="150"><g　style="stroke:　#0000ff;　stroke-width:　4px;　fill:　#ff0000">
　　　　<rect　　　　x="10"　　y="10"　width="100"　height="50"　/>
　　　　<circle　cx="150"　cy="35"　r="25"　/>
　　　　<circle　cx="250"　cy="35"　r="25"
　　　　　　　　　　　style="stroke:　#009900;　fill:　#00ff00;"/>
</g>
</svg>

В этом примере определен<g>элемент с тремя подэлементами. Этот<g> элемент имеет одинstyleпервые два подэлемента не имеютstyleсвойства. Поэтому, стили, определенные в элементе<g>наследуются этими подэлементами. Третий подэлемент имеет одинstyleСвойства установки цвета штриховки и заливки, но они все еще наследуются этим<g>элементаstroke-widthСвойства.

Эффект изображения после выполнения:

Недостатки: Элемент G не имеет свойств X и Y

Сравниваясь с возможностью группировки форм в вложенном <svg> элементе, способность преобразовывать все формы в элементе <g> является преимуществом. Элемент <svg> не может преобразовываться сам по себе. Вы должны поместить элемент <svg> внутрь элемента <g>, чтобы преобразовать вложенные формы.
不过，与
Однако, по сравнению с элементом <svg>, у элемента <g> есть недостаток. Элемент <g> нельзя просто переместить, изменяя его атрибуты x и y, включая все вложенные формы. Элемент <g> не имеет атрибутов x и y. Для перемещения содержимого элемента <g> можно использовать атрибут transform с функцией «translate», например: transform ="translate(x,y)".

<svg width="320" height="150">
　　　　<g transform="rotate(45 50 50)">
　　　　　　　　Если нужно использовать атрибуты x и y для перемещения всех форм внутри элемента <g>, то элемент <g> нужно вложить в элемент <svg>. Элемент <svg> имеет атрибуты x и y. Вот пример:
　　　　　　　　　　　　<line x1="10" y1="10" x2="85" y2="10"
　　　　　　　　style="stroke: #006600;"/>
　　　　　　　　　　　　<rect x="10" y="20" height="50" width="75"
　　　　　　　　style="stroke: #006600; fill: #006600"/>
　　　　　　　　　　<text x="10" y="90" style="stroke: #660000; fill: #660000">
　　　　</g>
</svg>

oldtoolbag.com Основной курс</text><g>внутри этого примера,　<svg>внутри элемента. Обратите внимание, что все формы внутри<svg>атрибут x установлен на 100. Это означает, что сначала внутри формы<g>проводить преобразование, затем перемещать по оси x на 100, так как<svg>положение x = 100. После выполнения изображения будет выглядеть так:

Вы также можете переключить вложенность, установив<svg>элемент вложен в<g>внутри элемента, как показано ниже:

<svg width="320" height="150">
<g transform="rotate(45 50 50)">
<svg x="100">
　　　　<line x1="10" y1="10" x2="85" y2="10" style="stroke: #006600;"></line>
　　　　<rect x="10" y="20" height="50" width="75" style="stroke: #006600; fill: #006600"></rect>
　　　　<text x="10" y="90" style="stroke: #660000; fill: #660000">oldtoolbag.com Основной курс</text>
</svg>
</g>
</svg>

Затем форма сначала движется на 100 по оси x, потому что положение элемента <svg> x="100", затем вращается вокруг точки 50,50 на 45 градусов. Результаты следующие:

Эти два изображения могут выглядеть одинаково, но они различаются. Разница заключается в порядке выполнения движения и вращения. Если внимательно看一下, можно увидеть, что форма не выровнена. Кроме того, обратите внимание, что даже если первый образец отображается в виде точек на изображении, это также верно. Это происходит из-за того, что сначала форма была повернута, а затем текст на повернутой части выскочил за пределы изображения. После этого при движении влево не хватает некоторых частей текста.